Passing template to component in Angular

<!-- Wrapper.Component.html -->
<p>
  hello
  <ng-content></ng-content>
</p>

<wrapper>
  <span> World </span>
</wrapper>

<p>
  hello
  <span> World </span>
</p>

appear in the Wrapper, will multiple <span> World </span> appear? ? The answer is no. The essence is just to move elements, and will not automatically create the incoming template, so even if you use ngFor to wrap There will be many <span> World </span>. If custom components are passed in, these components will only be instantiated once.

Advanced Usage

is just like this, it will be too useless. When using You can specify a selector, which can capture matching direct child elements. For example:

<!-- Wrapper.Component.html -->
<p>
  hello
  <ng-content></ng-content>
  <hr/>
  <ng-content select="span"></ng-content>
</p>

<wrapper>
  <span> World </span>
  2333
</wrapper>

<p>
  hello
  2333
  <hr/>
  <span> World </span>
</p>

ng-content tag In addition to the select attribute, you can also use the ngProjectAs attribute on the child element. This attribute allows this element to be captured by the ng-content specified in the parent element. For example:

<wrapper>
  <p ngProjectAs="span"> World </p>
  2333
</wrapper>

The second method NgTemplateOutlet directive

ng-content can indeed have the effect of passing in a template. But there is a very fatal problem, that is, data cannot be passed to the incoming template. In order to pass data into the incoming template, you need to use the NgTemplateOutlet directive.

Basic usage

@Component({
 selector: 'ng-template-outlet-example',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>

  <ng-template #name let-name="data"><span>Hello {{name}}!</span></ng-template>
`
})
class NgTemplateOutletExample {
 myContext = {data: &#39;World&#39;};
}

ng-container is a virtual element. On this element, we use an NgTemplateOutlet directive to specify To instantiate the following ng-template named name. At the same time, the myContext object is passed in as the instantiated data context, so "Hello World!" will eventually be displayed. It is worth noting the way to obtain the transmitted data context in ng-template: let-variableName='key'.

Advanced use

@Component({
 selector: 'wrapper',
 template: `
  <ng-container *ngTemplateOutlet="name; context: myContext"></ng-container>
`
})
class NgTemplateOutletExample {
 @ContentChild(TemplateRef) name: TemplateRef<any>;
 myContext = {data: &#39;World&#39;};
}

<wrapper>
  <ng-template let-value="data">
    <span>Hello {{value}}!</span>
  </ng-template>
</wrapper>

How to batch edit dynamically bound radio lists in vue.js

When using React components What are the commands to transfer Vue components?

How to copy content to the clipboard in JavaScript

The above is the detailed content of Passing template to component in Angular. For more information, please follow other related articles on the PHP Chinese website!