将数据传递给组件的指令
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将数据传递给组件的指令相关的知识,希望对你有一定的参考价值。
我有以下指令代码:
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
的声明中加载了WhileDirective
不幸的是我在编译时遇到错误:
未捕获错误:模板解析错误:无法绑定到'amountOfTeams',因为它不是'p'的已知属性。 (“] [amountOfTeams] =”“[counter] =”“>
"): ng:///e/e.html@1:14 Can't bind to 'counter' since it isn't a known property of 'p'. (" ][counter]="">
答案
您收到的错误是因为您尝试绑定到不存在的p
元素的属性。
要将信息传递到结构指令中,请在指令的双引号内输入逻辑。
<p *while="some logic"></p>
以上是关于将数据传递给组件的指令的主要内容,如果未能解决你的问题,请参考以下文章