1、在父组件里面改变子组件的样式
问题分析
angular组件的CSS样式被封装进了自己的视图中，而不会影响到应用程序的其它组件,这个效果在大部分时候非常的有用,我们不用担心某个组件的代码会污染其子组件,但当我们想改变第三方库的样式的时候也非常的麻烦。angular的视图封装模式默认是Emulated 模式,以下是官方对其功能的描述。
通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。
其实如果在html中搜索#comp1,会得到如下的结果。angular默认的为每个组件添加了一个属性，同样也为css限定了对应的属性。这也是为什么在"父组件"修改"子组件"不生效,因为根本找不到#comp1[_ngcontent-haw-c0]选择器对应的元素。
问题分析
解决办法
可以使用 /deep/或::ng-deep选择器来强制一个样式对各级子组件的视图也生效，它不但会作用于组件的子视图，也会作用于投影进来的内容(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的路由跳转与传参
https://www.jianshu.com/p/28f57c670979
3、引用模板中的某个 DOM 元素, 即 模板引用变量 #var
当我们需要引用一个Dom元素的值的时候，原生js要求我们以操作Dom的方式来(document.getElementById())或者(document.getElementsByClassName()),而在angualr中 使用模板引用变量 ( #var )即可。
栗子：
使用井号 (
#) 来声明引用变量。#phone的意思就是声明一个名叫phone的变量来引用<input>元素
你可以在模板中的任何地方引用模板引用变量。 比如声明在<input>上的phone变量就是在模板另一侧的<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 对模板引用变量赋值
image.png
把
NgModel 导出成了一个名叫 name 的局部变量。NgModel 把自己控制的 FormControl 实例的属性映射出去，让你能在模板中检查控件的状态，比如 valid 和 dirty。要了解完整的控件属性，参见 API 参考手册中的AbstractControl。
4、在组件里 引用其它组件的属性值，即声明输入与输出属性
angular里，我在某个组件里如果想使用某个组件的内部属性值时是肯定会报错的，因为angular是不允许组件自身的值被其它组件修改，这时可以使用@[Input](https://angular.cn/api/core/Input)() 和 @[Output](https://angular.cn/api/core/Output)() 装饰器。
参考:https://angular.cn/guide/template-syntax#input-and-output-properties
网友评论