【angular19】入门基础教程(四):默认的css隔离作用域
众所周知，在vue和react框架中，我们css都是全局作用域的，如果不显示声明为私有的组件级别作用域，会影响到全局的布局样式。
所以在vue中，需要配置scoped这样的属性来限制css的作用范围，在react中相对来说要复杂点,css module或者第三方的styled-component解决方案是比较常见的
效果展示
代码实现
- 父组件
import {Component,signal,computed,effect,inject,Injector,untracked,
} from '@angular/core';
import { ChildComp } from '../ChildComp1/index';@Component({selector: 'UserProfile',templateUrl: './index.html',styleUrls: ['./index.css'],imports: [ChildComp],
})
export class UserProfile {}
<main class="main-box"><h2>{{title}}</h2><div><p>{{userInfo.name}}</p><p>{{userInfo.age}}</p><p>{{userInfo.sex}}</p><p>{{userInfo.address.city}}</p><p>{{userInfo.address.street}}</p><button (click)="handleChangeName()">改变姓名</button><p>我银行账户的存款:{{money()}}</p><p>需要换银行的贷款:{{payload()}}</p><button (click)="handleChangeAge()">改变存款</button><button (click)="reset()">重置</button><!-- <button (click)="handleChangePayload()">降低贷款</button> --><child-comp /></div>
</main>
- 子组件
<div class="main-box"><h2>{{title}}</h2>
</div>
import { Component } from '@angular/core';
@Component({selector: 'child-comp',templateUrl: './index.html',styleUrls: ['./index.css'],
})
export class ChildComp {title = 'child-demo';
}
如何禁用这种默认的组件级别样式
先看效果
在ng中也考虑到了这个问题，也给我们三种配置样式作用域
- ViewEncapsulation.Emulated 默认的效果
- ViewEncapsulation.ShadowDom 此模式严格保证只有该组件的样式才应用于组件模板中的元素。
- ViewEncapsulation.None 与组件关联的任何样式都表现为全局样式。
这样就实现了样式的全局作用域
原理分析
可以看到ng在组件编译后，自动给组件的类名加上了指纹，类似于css的module和vue中的scoped效果，成为了私有的组件级别的类型。