我已经制作了两个组件,AppComponent和WelcomeComponent。
应用组件html具有以下结构:
<!-- header code divs and navs -->
<router-oulet> </router-oulet>
<app-welcome (valueChange)='displayCounter($event)'></app-welcome>
<!-- header code divs and navs -->
欢迎组件html具有以下内容:
<div class="row center">
<a (click)="loginFb()" id="download-button" class="btn-large waves-effect waves-light orange">Registrarte</a>
</div>
这就是我在“欢迎组件”中正在做的事情:
export class WelcomeComponent implements OnInit {
error: any;
autorized: boolean;
@Output() valueChange: EventEmitter <boolean>;
constructor(public af: AngularFireAuth, public router: Router) {
}
ngOnInit() {
this.autorized = false;
}
loginFb() {
console.log("holaa wey")
this.valueChange.emit(this.autorized);
}
AppComponent具有此代码
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'app';
error: any;
@Input() public autorized: boolean;
constructor(public af: AngularFireAuth, public router: Router) {
this.autorized=true;
}
signOut(): void {
this.af.auth.signOut();
this.router.navigate(['/'])
}
displayCounter(count) {
console.log("paso por sadsdf")
console.log(count);
this.autorized=count;
}
所以实际上输出是:
"paso por sadsdf"
"holaa wey"
唯一的问题是html复制如下所示的WelcomeComponent:
imgur.com/a/wsdyyPt
如何在没有选择器</app-welcome>
的情况下使此代码正常工作?
(valueChange)='displayCounter($event)