如何将数据从父组件绑定到角度6中的可重用组件？

Question

我有一个侧边栏作为可重用组件，可在blogComponent和blogDeatilComponent内部的Info.plist中使用。 如何将博客中的数据绑定到侧边栏？

stackblitz

Answer 1

您可以在指令中通过@Input（）将数据按角度传递给指令：

import { Directive, ViewContainerRef, OnInit , Input } from '@angular/core';
import { ReusableService } from './reusable.service';

@Directive({
    selector: '[reusableOutlet]'
})
export class ReusableDirective implements OnInit {

   @Input()
    set reusableOutlet(passedValue: any) {
        console.log(passedValue);
    }

    constructor(private viewContainerRef: ViewContainerRef, private reusableService: ReusableService) {}

    public ngOnInit(): void {
        this.reusableService.attach(this.viewContainerRef);
    }
}

用法：

<ng-template [reusableOutlet]="data"></ng-template>

DEMO。