Explain the projection of angular component in detail

Time:2021-7-13
catalogue
  • summary
  • 1、 Simple example
    • 1. The < ng content > instruction is used to mark the projection point in the subcomponent
    • 2. In the parent component, the HTML fragment of the projection point to be projected to the child component is written to the label of the child component
  • 2、 Multiple < ng content > projection points
    • 3、 Inserting HTML by binding the angular attribute
      • 4、 Compare the way of ngcontent instruction and attribute binding innerHTML

        summary

        The content of component template is changed dynamically at runtime. It’s not as complicated as routing. It’s just a piece of HTML without business logic.

        The ngcontent instruction projects any fragment from the template of the parent component onto the child component.

        1、 Simple example

        1. The < ng content > instruction is used to mark the projection point in the subcomponent

        <div>
          <h2>I'm a subcomponent</h2>
          < div > this div is defined in the subcomponent < / div >
          <ng-content></ng-content> 
        </div>

        2. In the parent component, the HTML fragment of the projection point to be projected to the child component is written to the label of the child component

        <div>
          <h2>I am the parent component</h2>
          < div > this div is defined in the parent component < / div >
          <app-child2>
            < div > this div is the projection of the parent component to the child component
          </app-child2>
        </div>

        effect:

        Add style to subcomponents:

        
        .wrapper{
            background: lightgreen;
        }

        Add style to parent component:

        
        .wrapper{
            background: cyan;
        }

        2、 Multiple < ng content > projection points

        Sub components:

        <div>
          <h2>I'm a subcomponent</h2>
          <ng-content selecter=".header"></ng-content>
          < div > this div is defined in the subcomponent < / div >
          <ng-content selecter=".footer"></ng-content> 
        </div>

        Parent component:

        <div>
          <h2>I am the parent component</h2>
          < div > this div is defined in the parent component < / div >
          <app-child2>
            < div > this is the page header, this div is the parent component projected into the child component, and the title is {{Title}} < / div >
            < div > this is the page header, and this div is the projection of the parent component to the child component
          </app-child2>
        </div>

        The header and footers are projected into the subcomponent, and the title is projected in the same way.

        The interpolation expression in the projection content of the parent component template can only bind the attributes of the parent component, although the content will be projected to the child component.

        3、 Inserting HTML by binding the angular attribute

        Add a line to the parent component template:

        
        <div [innerHTML]="divContent"></div>

        Add a divcontent attribute to the parent component, and the content is an HTML fragment.

        Divcontent = < div > attribute binding innerHTML < / div > ";

        effect

        4、 Compare the way of ngcontent instruction and attribute binding innerHTML

        [innerHTML] is a browser specific API.

        Ngcontent is platform independent. Multiple projection points can be bound.

        Priority is given to the ngcontent instruction

        The above is the detailed content of the projection of angular components. For more information about the projection of angular components, please pay attention to other related articles of developer!

        Recommended Today

        Give an example to explain the table data structure in Lua

        In the text — single line comments starting with two horizontal lines, – [[add two [and] to indicate multi line comments –]].   Copy codeThe code is as follows: –Table = Lua’s unique data structure;—          They are associative arrays.–Similar to PHP arrays or JS objects,–They are hash lookup tables (dicts) and can also be […]