Angular 在多个组件中使用具有数据绑定的模板

编辑：我在下面解决了这个问题。如果您正在寻找一种方法来重用依赖其父组件的服务进行数据绑定的模板，请继续阅读。或者直接跳到TL；这是答案的一部分

我在三个单独的组件中使用了一块标记作为模板。我想从这个标记创建一个模板，这样我就可以使用它的选择器作为元素标记将它放到这些组件中

下面是使用此标记块的三个组件之一

import { Component, OnInit } from '@angular/core';
import { Thread } from './thread';
import { FeaturedThreadsService } from './featured-threads.service';

@Component({
    moduleId: module.id,
    selector: 'featured-threads',
    templateUrl: 'featured-threads.component.html',
    styleUrls: ['featured-threads.component.css'],
    providers: [ FeaturedThreadsService ]
})

export class FeaturedThreadsComponent implements OnInit { 

    threads: Thread[];

    constructor(private featuredThreadsService: FeaturedThreadsService) { }

    getThreads(): void {
        this.threads = this.featuredThreadsService.getThreads();
    }

    ngOnInit(): void {
        this.getThreads();
    }
}

特色线程.component.html

如下

<div *ngFor="let thread of threads" class="thread-tile">
<div class="description col-sm-12">
    <div class="author-card col-sm-2">
        <div>
            <img src="{{thread.profileImage}}" class="img-fluid">
        </div>
        <div class="awards">
            <span class="author-card-renown">
                {{thread.renown}}
            </span>
            <ul class="list-inline">
                <li style="padding: 2px" *ngIf="thread.numBlue > 0"><img src="./assets/blue.png"> {{thread.numBlue}}</li>                   
                <li style="padding: 2px" *ngIf="thread.numGold > 0"><img src="./assets/gold.png"> {{thread.numGold}}</li>
                <li style="padding: 2px" *ngIf="thread.numSilver > 0"><img src="./assets/silver.png"> {{thread.numSilver}}</li>         
            </ul>
        </div>
    </div>
    <div class="title col-sm-10">{{thread.title}}</div> 
    <div class="author-date col-sm-10">
        by <a href="#">{{thread.author}}</a> on {{ (thread.date | amFromUnix) | amDateFormat:'MM/DD/YY'}} at {{ (thread.date | amFromUnix) | amDateFormat:'hh:mmA'}}
    </div>
    <div class="participants col-sm-10">
        Participants: 
        <ul *ngFor="let participant of thread.participants" class="participant list-inline">
            <li><a href="#">{{participant}}</a></li>
        </ul>
    </div>
    <div class="tags-container col-sm-10">
        <div *ngFor="let tag of thread.tags">
            <div class="tag">{{tag}}</div>
        </div>
    </div>
    <div class="thread-metrics">
        {{thread.numPosts}} posts  {{thread.numFlags}} flags  {{thread.numParticipants}} participants  {{thread.numContributors}} contributors
    </div>
</div>

然后我将模板放入组件中，并将子对象的迭代实例绑定到其父对象的属性

<thread *ngFor="let thread of threads" [threads]="threads"></thread>

编辑：这里我认为迭代以某种方式迭代了子模板中的数据绑定。原来这条线就是问题所在。有关详细信息，请参阅我的答案

只有

特色线程。组件的行为符合要求。它使用从
特色线程中提取的数据正确显示。服务
的逻辑。其他两个组件只是列出所有线程，绕过其父服务的逻辑

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

@Component({
    moduleId: module.id,
    selector: 'thread',
    templateUrl: 'thread.component.html',
    styleUrls: ['thread.component.css']
})

export class ThreadComponent {

    @Input() threads: Thread[];
}

为什么会这样？我也愿意接受任何可以实现相同结果的方法，即不必在三个单独组件的模板中重复相同的标记

<thread *ngFor="let thread of threads" [threads]="threads"></thread>

这会将父组件的
threads
属性绑定到子模板的
ngFor=“let thread in threads”
表达式中的
threads

TL；医生：

如果要在多个组件中使用模板，而模板包含到其组件和/或来自其组件的数据绑定，只需在模板的组件声明中使用
@Input
装饰器即可：

@Input（）foo:foo

使用如下所示的属性绑定将模板放入父组件时，父组件的属性
条
将绑定到模板的组件输入
foo
：


<thread [threads]="threads"></thread>