Angular의 구성 요소에 템플릿 전달

이 글에서는 Angular가 템플릿을 컴포넌트에 전달하는 두 가지 방법을 주로 소개합니다. 첫 번째 방법은 <ng-content> 두 번째 방법은 NgTemplateOutlet 명령과 다양한 사용 방법입니다.

최근 글을 쓸 때. 날짜 선택기 컴포넌트는 향후 발생할 수 있는 다양한 요구 사항을 충족하기 위해 컴포넌트의 스타일을 고도로 맞춤화할 수 있어야 합니다. 이 목표를 달성하려면 휴일 표시와 같이 날짜 선택기 구성 요소 외부의 각 날짜 표에 표시되는 콘텐츠를 제어할 수 있어야 합니다. 이때 호출자는 구성 요소 템플릿의 일부를 제공해야 합니다.

React에서 이 요구 사항은 date => Element 와 같은 함수를 구현하기만 하면 됩니다. 그러나 Angular 템플릿은 순수 템플릿이므로 이 기능을 구현하는 데 몇 가지 특수한 개념이 필요합니다. date => Element 这样的函数就好了，但是 Angular 模板是纯粹的模板，需要使用一些专门的概念才能实现这个功能。

第一种方式 <ng-content>

<ng-content> 这个标签到本文撰写时为止，还没有官方的文档，甚至连占位符都没有。但是这并不妨碍我们的使用，外国热心网友已经总结出了 <ng-content> 在现阶段的特点与作用。

基本用法

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

假设我们有一个上述的组件，然后向下面这样调用：

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

那么最终的渲染结果将会是这样的：

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

看起来就是发生了很简单的替换，但是如果在 Wrapper 中出现了多个 <ng-content> 会出现多个 World 吗？答案是不会的。<ng-content> 的本质只是移动元素，并不会去自动的创建传入的模板，所以就算用 ngFor 套住 <ng-content> 也不会出现很多个 World 。如果传入的是自定义的组件，这些组件也只会被实例化一次。

进阶用法

当然，如果 <ng-content> 的功能仅仅只是这样就显得太鸡肋了，在使用 <ng-content> 的时候可以指定一个选择器，这个选择器可以捕获相符的直接子元素。例如：

<!-- 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 标签的 select 属性之外，还可以在子元素上使用 ngProjectAs 属性，这个属性可以让这个元素被父元素中指定的 ng-content 所捕获。举个例子：

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

这次被传入的模板变成了一个 p，但是因为设置了 ngProjectAs，所以“World”会出现在分割线下方。

第二种方式 NgTemplateOutlet 指令

使用 ng-content 确实可以起到传入模板的效果，但是却有个很致命的问题，就是无法传递数据到传入的模板中。为了将数据传递到传入的模板中，就需要使用到 NgTemplateOutlet 指令。

基本使用

这个指令可以用来在模板的指定位置实例化一个 TemplateRef 对象，同时，在实例化的过程中还可以传入一个数据对象。而 TemplateRef 可以通过 ng-template 标签来创建，举个例子：

@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 是一个虚拟的元素，在这个元素上我们使用了一个 NgTemplateOutlet 指令，指定了要实例化下面的名为 name 的 ng-template。同时把 myContext 这个对象作为实例化的数据上下文传入，所以最终就会显示 “Hello World!”。值得注意的是在 ng-template 里面获取传输的数据上下文的方式：let-variableName='key'

첫 번째 방법<ng-content>

<ng-content> 이 태그는 자리 표시자도 아닙니다. 하지만 이것이 우리의 사용을 방해하지는 않습니다. 열성적인 해외 네티즌들은 현재 단계에서 <ng-content>의 특징과 기능을 요약했습니다.

기본 사용법

@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>

그러면 최종 렌더링 결과는 다음과 같습니다.

rrreee

매우 간단한 교체가 발생한 것 같지만 만약 여러 <ng-content>가 Wrapper에 표시됩니다. 여러 개의 World 가 표시됩니까? 대답은 '아니요'입니다. <ng-content>의 핵심은 단지 요소를 이동하는 것이며 들어오는 템플릿을 자동으로 생성하지 않으므로 ngFor를 사용하여 <ng-content> > 월드는 많지 않을 것입니다. 사용자 정의 구성 요소가 전달되면 이러한 구성 요소는 한 번만 인스턴스화됩니다.

고급 사용법

물론 <ng-content> 기능이 이대로라면 <ng-content> 선택기를 지정하면 이 선택기가 일치하는 직계 하위 요소를 캡처할 수 있습니다. 예: rrreee

그런 다음 다음과 같이 사용합니다.

rrreee최종 렌더링 결과는 다음과 같습니다. rrreee

ng-content 태그의 선택 속성을 설정하는 것 외에도 다음을 수행할 수 있습니다. 또한 하위 요소에서도 설정합니다. 요소에서 ngProjectAs 특성을 사용하면 이 요소가 상위 요소에 지정된 ng-content로 캡처될 수 있습니다. 예: 🎜rrreee🎜이번에 전달된 템플릿은 p가 되지만 ngProjectAs가 설정되어 있으므로 구분선 아래에 "World"가 나타납니다. 🎜🎜🎜두 번째 방법 NgTemplateOutlet 명령🎜🎜🎜 ng-content 를 사용하면 실제로 템플릿을 전달하는 효과를 얻을 수 있지만 그렇지 않습니다. 매우 치명적인 문제가 있습니다. 즉, 들어오는 템플릿에 데이터를 전달할 수 없습니다. 데이터를 수신 템플릿으로 전달하려면 NgTemplateOutlet 지시어를 사용해야 합니다. 🎜🎜🎜기본 사용법🎜🎜🎜이 명령은 템플릿의 지정된 위치에서 TemplateRef 개체를 인스턴스화하는 데 사용할 수 있습니다. 동시에 인스턴스화 프로세스 중에 데이터 개체를 전달할 수도 있습니다. TemplateRef는 ng-template 태그를 통해 생성할 수 있습니다. 예: 🎜rrreee🎜ng-container 는 가상 요소입니다. 이 요소에서는 NgTemplateOutlet 지시문을 사용하여 인스턴스화할 개체를 지정합니다. 아래에 이름이 지정된 ng-템플릿. 동시에 myContext 객체가 인스턴스화된 데이터 컨텍스트로 전달되므로 결국 "Hello World!"가 표시됩니다. ng-template: let-variableName='key'에서 전송된 데이터 컨텍스트를 얻는 방법에 주목할 가치가 있습니다. 🎜🎜🎜고급 사용🎜🎜🎜다음 단계는 이 문서의 시작 부분에 언급된 요구 사항을 구현하여 구성 요소 외부의 템플릿을 전달하는 것입니다. 위의 예를 예로 들어 보겠습니다. 템플릿은 외부 세계에서 하위 콘텐츠로 전달되어야 하기 때문에 여기에서는 템플릿을 수동으로 캡처해야 합니다. 🎜rrreee🎜 이렇게 간단합니다. 변경하면 외부 세계의 구성 요소를 만들 수 있습니다. 템플릿이 허용됩니다. 시도해 보겠습니다. 🎜rrreee🎜위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜vue.js에서 동적으로 바인딩된 라디오 목록을 일괄 편집하는 방법🎜🎜🎜🎜React 구성 요소를 사용하여 Vue 구성 요소를 전송할 때 작성하는 명령은 무엇입니까? 🎜🎜🎜🎜JavaScript에서 콘텐츠를 클립보드에 복사하는 방법🎜🎜

위 내용은 Angular의 구성 요소에 템플릿 전달의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!