search

deepthan / blog-angular

Angular 笔记
280 stars 58 forks source link

ng-content #72

Open deepthan opened 4 years ago

deepthan commented 4 years ago

ng-content

是什么？

它是一个插槽，可以把父组件的dom元素传递到子组件中。相当于vue里的slot。

如何使用

直接传递小示例

父组件有一段文本'可爱的小猫'，传入子组件中

父组件ts

@Component({
  selector: 'parent',
  template: `
    <son> <p>可爱的小猫</p> </son>
  `,
})

子组件ts

@Component({
  selector: 'son',
  template: `
    <ng-content></ng-content> 
  `,
})

子组件html会以此渲染：

@Component({
  selector: 'son',
  template: `
    <p>可爱的小猫</p>
  `,
})

<ng-content></ng-content>是一个插槽，把<p>可爱的小猫</p>插入了它占的位置。

其他用法

其实和 querySelector 选取dom用法差不多。

1. 通过节点匹配

@Component({ // 父组件ts
  selector: 'parent',
  template: `
    <son> <p cat>可爱的小猫</p> </son>
  `,
})
@Component({ //子组件ts
  selector: 'son',
  template: `
    <ng-content select='p'></ng-content> 
  `,
})

2. 通过属性值匹配

@Component({ // 父组件ts
  selector: 'parent',
  template: `
    <son> <p cat>可爱的小猫</p> </son>
  `,
})
@Component({ //子组件ts
  selector: 'son',
  template: `
    <ng-content select='[cat]'></ng-content> 
  `,
})

3. 通过class匹配

@Component({ // 父组件ts
  selector: 'parent',
  template: `
    <son> <p class="cat">可爱的小猫</p> </son>
  `,
})
@Component({ //子组件ts
  selector: 'son',
  template: `
    <ng-content select='.cat'></ng-content> 
  `,
})

4. 通过id匹配

@Component({ // 父组件ts
  selector: 'parent',
  template: `
    <son> <p id="cat">可爱的小猫</p> </son>
  `,
})
@Component({ //子组件ts
  selector: 'son',
  template: `
    <ng-content select='#cat'></ng-content> 
  `,
})