Question

刚学习Angular2 / 4所以请耐心等待......

假设我有 CoursesComponent ，其中包含 CourseComponent 的列表。 CoursesComponent 的 HTMLTemplate 只是迭代 CourseComponent （列表）字段并显示每个课程。

我希望 CourseComponent 使用它自己的 HTMLTemplate 来处理当然的显示。

CourseComponent HTMLTemplate （带选择器：＆＃39;当然＆＃39;）

<div class='course'>
{{title}}({{code}})
<br/>
{{description}}
</div>

CoursesComponent HTMLTemplate （带选择器：＆＃39;课程＆＃39;）

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

AppComponent HTMLTemplate

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

你是如何实现这一目标的？它甚至可能吗？模板可以这种方式链接吗？

Answer 1

你可以尝试这个片段

<强> course.component.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;
}

<强>航向list.component.ts

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'
    }
  ];

}

<强> app.component.html

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

Answer 2

在你的 CoursesComponent html文件中，add可以添加你这样的变量

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

然后您必须在 CourseComponent ts文件

中添加输入变量

@Input() data: any = [];

Angular中的链接模板

2 个答案: