將數據從組件傳遞到指令

Question

我有以下指令代碼：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[while]' })
export class WhileDirective {

constructor(private templateRef: TemplateRef<any>,
            private viewContainer: ViewContainerRef)
{ }

@Input() amountOfTeams: number;
@Input() counter:number;

@Input() set while(condition: boolean) {
        some logic....

    }
}

我的組件

import {Component, OnInit} from "@angular/core";
import {Game} from "../game";
import {PlayGameService} from "../playGame.service";


@Component({
    selector: "teams-Name",
    styleUrls:["teamsName.component.scss"],
    template: `<div  class='start-menu'>
<p  *while="" [amountOfTeams]="" [counter]=""></p>
</div>`

})

export class TeamsNameComponent {

    game: Game;
    counter:number = 0;

    constructor (public playGameService: PlayGameService) {}


    ngOnInit(){
        this.game = this.playGameService.getGame();
        console.log(this.game);
    }

}

我已經在我的app.module.ts中的聲明中加載了app.module.ts

不幸的是，編譯時出現錯誤：

未捕獲的錯誤：模板解析錯誤：由於它不是'p'的已知屬性，因此無法綁定到'amountOfTeams'。 （“] [amountOfTeams] =”“ [counter] =”“>

“）：ng：///e/e.html@1：14無法綁定到'counter'，因為它不是'p'的已知屬性。（”] [counter] =“”>

Answer 1

您收到的錯誤是因為您試圖綁定到不存在的p元素的屬性。

要將信息傳遞到結構指令中，請在指令的雙引號中輸入邏輯。

<p *while="some logic"></p>