如何解决如何在Angular中创建公共子组件
我是angular的新手。我将为所有ui组件开发通用的下拉栏。因此,我将与其他父组件一起创建一个通用的子可重用组件。 / p>
这是我的父组件的文件夹结构。
解决方法
父组件不能使用数据绑定来读取子属性或调用子方法。您可以通过为子元素创建模板引用变量,然后在父模板中引用该变量来完成这两个任务,如以下示例所示。
以下是一个子CountdownTimerComponent,它反复递减计数到零并发射火箭。它具有控制时钟的启动和停止方法,并在其自己的模板中显示倒计时状态消息。
import { Component,OnDestroy,OnInit } from '@angular/core';
@Component({
selector: 'app-countdown-timer',template: '<p>{{message}}</p>'
})
export class CountdownTimerComponent implements OnInit,OnDestroy {
intervalId = 0;
message = '';
seconds = 11;
clearTimer() { clearInterval(this.intervalId); }
ngOnInit() { this.start(); }
ngOnDestroy() { this.clearTimer(); }
start() { this.countDown(); }
stop() {
this.clearTimer();
this.message = `Holding at T-${this.seconds} seconds`;
}
private countDown() {
this.clearTimer();
this.intervalId = window.setInterval(() => {
this.seconds -= 1;
if (this.seconds === 0) {
this.message = 'Blast off!';
} else {
if (this.seconds < 0) { this.seconds = 10; } // reset
this.message = `T-${this.seconds} seconds and counting`;
}
},1000);
}
}
承载计时器组件的CountdownLocalVarParentComponent如下:
import { Component } from '@angular/core';
import { CountdownTimerComponent } from './countdown-timer.component';
@Component({
selector: 'app-countdown-parent-lv',template: `
<h3>Countdown to Liftoff (via local variable)</h3>
<button (click)="timer.start()">Start</button>
<button (click)="timer.stop()">Stop</button>
<div class="seconds">{{timer.seconds}}</div>
<app-countdown-timer #timer></app-countdown-timer>
`,styleUrls: ['../assets/demo.css']
})
export class CountdownLocalVarParentComponent { }
父组件不能将数据绑定到子项的start和stop方法,也不能绑定到其seconds属性。
您可以在代表子组件的标签上放置一个局部变量#timer。这样可以为子组件提供参考,并可以从父模板中访问其任何属性或方法。
我希望这个例子对您有帮助
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。