1陕凹、在父組件里面改變子組件的樣式
問題分析
angular組件的CSS樣式被封裝進(jìn)了自己的視圖中，而不會(huì)影響到應(yīng)用程序的其它組件,這個(gè)效果在大部分時(shí)候非常的有用,我們不用擔(dān)心某個(gè)組件的代碼會(huì)污染其子組件,但當(dāng)我們想改變第三方庫的樣式的時(shí)候也非常的麻煩吴叶。angular的視圖封裝模式默認(rèn)是Emulated 模式,以下是官方對(duì)其功能的描述。
通過預(yù)處理（并改名）CSS 代碼來模擬 Shadow DOM 的行為序臂，以達(dá)到把 CSS 樣式局限在組件視圖中的目的晤郑。
其實(shí)如果在html中搜索#comp1,會(huì)得到如下的結(jié)果。angular默認(rèn)的為每個(gè)組件添加了一個(gè)屬性贸宏，同樣也為css限定了對(duì)應(yīng)的屬性造寝。這也是為什么在"父組件"修改"子組件"不生效,因?yàn)楦菊也坏?code>#comp1[_ngcontent-haw-c0]選擇器對(duì)應(yīng)的元素。
解決辦法
可以使用 /deep/或::ng-deep選擇器來強(qiáng)制一個(gè)樣式對(duì)各級(jí)子組件的視圖也生效吭练，它不但會(huì)作用于組件的子視圖诫龙，也會(huì)作用于投影進(jìn)來的內(nèi)容(ng-content)。
.f-red{
color: red;
}
/* 企圖修改組件1的字體顏色 */
/* :host ::ng-deep #comp1{
color: red;
} */
:host /deep/ #comp1{
color: red;
}
參考：https://blog.51cto.com/13876655/2393237
2鲫咽、Angular的路由跳轉(zhuǎn)與傳參
http://www.reibang.com/p/28f57c670979
3签赃、引用模板中的某個(gè) DOM 元素, 即 模板引用變量 #var
當(dāng)我們需要引用一個(gè)Dom元素的值的時(shí)候谷异，原生js要求我們以操作Dom的方式來(document.getElementById())或者(document.getElementsByClassName()),而在angualr中 使用模板引用變量 ( #var )即可。
栗子：
使用井號(hào) (
#) 來聲明引用變量锦聊。#phone的意思就是聲明一個(gè)名叫phone的變量來引用<input>元素
你可以在模板中的任何地方引用模板引用變量歹嘹。 比如聲明在<input>上的phone變量就是在模板另一側(cè)的<button>上使用的。
<input #phone placeholder="phone number">
<!-- lots of other elements -->
<!-- phone refers to the input element; pass its `value` to an event handler -->
<button (click)="callPhone(phone.value)">Call</button>
<input type="text" class="form-control" id="name"
required
[(ngModel)]="model.name" name="name"
#spy>
<br>TODO: remove this: {{spy.className}}
參考：https://angular.cn/guide/template-syntax#template-reference-variables--var-
也可以用
ref-前綴代替#孔庭。 下面的例子中就用把fax變量聲明成了ref-fax而不是#fax尺上。
<input ref-fax placeholder="fax number">
<button (click)="callFax(fax.value)">Fax</button>
3.2 對(duì)模板引用變量賦值
把
NgModel 導(dǎo)出成了一個(gè)名叫 name 的局部變量。NgModel 把自己控制的 FormControl 實(shí)例的屬性映射出去圆到，讓你能在模板中檢查控件的狀態(tài)怎抛，比如 valid 和 dirty。要了解完整的控件屬性芽淡，參見 API 參考手冊(cè)中的AbstractControl马绝。
4、在組件里 引用其它組件的屬性值挣菲，即聲明輸入與輸出屬性
angular里富稻，我在某個(gè)組件里如果想使用某個(gè)組件的內(nèi)部屬性值時(shí)是肯定會(huì)報(bào)錯(cuò)的，因?yàn)閍ngular是不允許組件自身的值被其它組件修改白胀，這時(shí)可以使用@[Input](https://angular.cn/api/core/Input)() 和 @[Output](https://angular.cn/api/core/Output)() 裝飾器唉窃。
參考:https://angular.cn/guide/template-syntax#input-and-output-properties
