Angular中的: host 和 ::ng-deep

现在的前端开发都是单页面组件化模式, 也是就一个项目就一个页面, 通过ruter来切换组件, angular也不例外。

而每个组件都有他们自己的样式，虽然每个组件都有自己的样式，但是最终都会打包到一起，那么，问题来了，组件之间的样式会相互影响吗。

我们新建一个项目my-app，在这个项目的src目录下有一个app组件，这个组件就是项目的根组件，我们把它当作父组件用，在app.component.ts里写上这些代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p>我是父组件</p>
  `,
  styles: ['']
})
export class AppComponent { }

父组件有了

我们再新建两个子组件a.component.ts和b.component.ts，也分别在ts文件里写上这些代码

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-a',
  template: `
    <p>我是子组件 a</p>
  `,
  styles: ['']
})
export class AComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

------------------------------------------------------------------------------

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-b',
  template: `
    <p>我是子组件 b</p>
  `,
  styles: ['']
})
export class BComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

再把他们用到父组件app中

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p>我是父组件<