Angular 角坐标中的链模板

只是学习英语2/4所以请容忍我

假设我有一个CourseComponent，它有一个CourseComponents的列表。课程组件的HTMLTemplate只需迭代课程组件（列表）字段并显示每个课程

我希望CourseComponent能够使用自己的HTMLTemplate处理显示

课程组件HTMLTemplate（带选择器：“课程”）

{{title}}（{{code}}）


{{description}}

课程组件HTMLTemplate（带选择器：'courses'）

AppComponent HTMLTemplate

<div>
<courses></courses>
</div>

---

你是如何做到这一点的？有可能吗？模板可以以这种方式链接吗？

在课程组件html文件中，add可以像这样添加变量

<div class='courses'>
<ul>
  <li *ngFor='let c of courseList'>
    <course [data]="c"></course>
  </li>
</ul>
</div>

---

你可以试试这个片段

课程.组件.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-course',
  templateUrl: `
  <h3>Course Title: {{data.title}}</h3>
  <p>Course Description: {{data.description}}</p>
  `,
  styleUrls: ['./course.component.css']
})
export class CourseComponent {
  @Input() data;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-course-list',
  templateUrl: `
  <ng-container *ngFor="let item of sampleCollection">
      <app-course [data]="item"></app-course>
  </ng-container>
  `,
  styleUrls: ['./course-list.component.css']
})
export class CourseListComponent {

  sampleCollection = [
    {
      title: 'Title Course 1',
      description: 'Description of course 1'
    },
    {
      title: 'Title Course 2',
      description: 'Description of course 2'
    },
    {
      title: 'Title Course 3',
      description: 'Description of course 3'
    }
  ];

}

从'@angular/core'导入{Component，Input}；
@组成部分({
选择器：“应用程序课程”，
模板URL:`
课程名称：{{data.Title}
课程描述：{{data.Description}

`,
样式URL:['./course.component.css']
})
导出类课程组件{
@输入（）数据；
}

课程列表.组件.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-course',
  templateUrl: `
  <h3>Course Title: {{data.title}}</h3>
  <p>Course Description: {{data.description}}</p>
  `,
  styleUrls: ['./course.component.css']
})
export class CourseComponent {
  @Input() data;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-course-list',
  templateUrl: `
  <ng-container *ngFor="let item of sampleCollection">
      <app-course [data]="item"></app-course>
  </ng-container>
  `,
  styleUrls: ['./course-list.component.css']
})
export class CourseListComponent {

  sampleCollection = [
    {
      title: 'Title Course 1',
      description: 'Description of course 1'
    },
    {
      title: 'Title Course 2',
      description: 'Description of course 2'
    },
    {
      title: 'Title Course 3',
      description: 'Description of course 3'
    }
  ];

}

从'@angular/core'导入{Component}；
@组成部分({
选择器：“应用程序课程列表”，
模板URL:`
`,
样式URL:['./课程列表.component.css']
})
导出类CourseListComponent{
样本收集=[
{
标题：“标题课程1”，
描述：“课程1的描述”
},
{
标题：“标题课程2”，
描述：“课程2的描述”
},
{
标题：“标题课程3”，
描述：“课程3的描述”
}
];
}

app.component.html

<app-course-list></app-course-list>

---

除了Angular1.x之外，不要对任何东西使用angularjs标记

<app-course-list></app-course-list>