教程 (Angular)模版引用變數的魔法

2021-09-24 06:47:52 字數 2046 閱讀 4492

【翻譯】【教程】模版引用變數的魔法

譯者:而井

模版引用變數是個好東西,它允許angular完成許多有用的事情。我經常稱這個功能為「井號語法」,因為在模版中它依賴乙個簡單的井號來建立對乙個元素(譯者注:元素包括html元素和元件元素)的引用:

placeholder="phone number">

複製**

上述的語法是如此的簡潔:它建立了乙個指向input元素的引用,這個引用稍後可以在我的模版中使用。需要注意的是,這個(引用)變數的作用域是它所定義的整個html模版(的範圍)(譯者注:即在定義這個引用變數的html模版中都可以訪問這個變數)。

例如,這裡就是我如何用這個引用來獲取輸入框的值(的例子):

callbutton>

複製**

注意那個phone(變數)指向了input的htmlelement物件例項。所以phone(變數)持有了(相應)htmlelement(例項物件)的任何屬性和方法,如id、name、innerhtml、value等。

上述是一種避免使用ngmodel或其他資料繫結的好方法,(因為)這種方法在校驗方面上不需要寫太多**。

答案就是可以奏效!假設我們有helloworldcomponent如下:

@component()

export

class hellocomponent

複製**

現在按照如下**,我們使用了「井號語法」得到了元件的引用:

複製**

它(模版引用變數)乙個最好的地方就是我們可以獲取實際上的元件例項物件helloworldcomponent。所以我們可以訪問這個元件的任何方法或屬性,即使他們(的許可權)是宣告為私有或保護的,多麼令人驚喜:

}複製**

我們不僅可以通過這種語法來讀取乙個元件的資料,而且也能修改它。

當然(可以),不過這裡需要進一步了解它(模版引用變數)。大部分的指令將會被作為(譯者注:html或元件標籤)的屬性來使用,這意味著我們無法在那裡真正應用「井號語法」,除非我們使用相同的語法進行扭**

複製**

在上面的例子裡,myform是乙個指向(應用於表單的)ngform指令的引用。

現在如果你細看上面的html元素,你可能會想:「等一下,那裡並沒有ngform指令!我沒有見過任何屬性叫ngform的!」,你(如果)這樣想就對了。

答案就在ngform指令的源**中:

@directive()

複製**

看到那個指令的選擇器的了沒?它(指令)將應用於任何沒有ngnoformformgroup屬性的form表單元素之上。因此,ngform指令將自動應用於我的form元素之上。

第二個被注意到的趣事就是裝飾器中的exportas屬性。它告訴angular:「嘿,如果有人想用模版引用變數來指向這個指令,(那麼指令的)名字就叫做ngform」。

現在我們已經知道它是如何運作的了。我們可以建立定製指令,並通過乙個叫exportas的來暴露該指令。

import  from

'@angular/core';

import from

'@angular/forms';

@component(}

first name valid: }

form value: }

form valid: }

`,})export

class ******formcomp

console.log(f.valid); // false

}}複製**

教程 (Angular)模版引用變數的魔法

翻譯 教程 模版引用變數的魔法 alain chautard 譯者 而井 模版引用變數是個好東西,它允許angular完成許多有用的事情。我經常稱這個功能為 井號語法 因為在模版中它依賴乙個簡單的井號來建立對乙個元素 譯者注 元素包括html元素和元件元素 的引用 上述的語法是如此的簡潔 它建立了乙...

Angular動態編譯HTML模版

問題 需要列印的模版特別多,而且各不相同,可能需要經常改動,如果在前端進行單獨建立元件的方式每次新增模版修改模版都要重新發布版本。解決方式 通過把模版html儲存到資料庫的方式,根據呼叫列印的傳參獲取不同的列印模版 oracle中nvarchar最多存4000個字元數量 nclob最大儲存大小為4g...

譯 Flask教程 模版

我們可以讓繫結到某個url的函式返回html.比如下面的 中,hello 函式會返回由 if name main 但大家看得出,這樣直接通過python 返回html內容顯得很笨,尤其當我們碰到需要對輸入變數做條件判斷和迴圈時,我們經常需要做字串嵌入拼接這種體力活.這種情況下,我們需要利用flask...