Angular中的ng-content的妙用你知道多少

  ng-content 是angular的内置指令，用于在 Angular 组件中定义插槽，以便将外部内容插入到组件中显示。它的作用类似于 HTML 中的  标签。下面将举例它的几个应用场景：

•  默认插槽：当父组件没有提供内容时，子组件可以显示默认内容。即所包裹的任何内容。

// child.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    

      
Child Component
       
    
  `
})
export class ChildComponent {}



// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    

      
Parent Component
       
    
  `
})
export class ParentComponent {}

• 具名插槽：父组件可以根据插槽的名称，将内容投影到子组件的特定位置。

// child.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    

      
Child Component
       
       
    
  `
})
export class ChildComponent {}



// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    

      
Parent Component
      
        
This is the header
        
This is the footer
      
    
  `
})
export class ParentComponent {}

• 选择器插槽：父组件可以根据选择器条件，将特定的内容投影到子组件中。

// child.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    

      
Child Component
       
    
  `
})
export class ChildComponent {}




// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    

      
Parent Component
      
Button 1
      
Not a button
      
Button 2
      
    
  `
})
export class ParentComponent {}

值得注意的是，ng-content具有一些属性：

1. **select**: 用于选择特定的内容进行插入。
2. **select.projectAs**: 用于指定插入的内容应该被投影为指定的元素。例如，可以使用 select.projectAs="div"来将插入的内容投影为 `div` 元素。
3. **select.attr**: 用于选择带有指定属性的元素进行插入。例如，select[attr.role=button]可以选择带有 role="button"属性的元素进行插入。
4. **select.class**: 用于选择带有指定类名的元素进行插入。例如，select.class="special"可以选择带有special类名的元素进行插入。

下面将举例这些属性的示用：

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    

      
Parent Component
      
This is a paragraph inside the parent component.
      
Special button
      
        
Default content for child component
        
Another special button
      
    
  `
})
export class ParentComponent {}



// child.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    

      
Child Component
       
       
       
    
  `
})
export class ChildComponent {}

注意！！！：

        在这个例子中，`中的 role="button"的

元素也会被投影进去。因为在 app-child组件中，我们使用了ng-content 的 select[attr.role=button]属性来选择带有 role="button"属性的元素进行插入。

        所以，无论父组件中有多少个带有 `role="button"` 属性的元素，只要它们被包裹在 `` 组件中，它们都会被投影到 `app-child` 组件中的对应位置。