Я новичок в angular, и я планирую создать динамическую функцию в моем приложении. Мне нужна динамическая функция (например, вызывается родительский компонент, функция buttonclick на дочернем компоненте будет делать console.log, тогда как при вызове компонента parent2 функция buttonclick будет создавать диалоговое окно с предупреждением). Можно ли вызвать динамическую функцию с различными реализациями для каждого компонента? Как я это сделаю?
child.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
template : '<button click()="dynamicFunction()">Click!</button>',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
constructor() { }
dynamicFunction(){
//do nothing
}
ngOnInit() {
}
}
parent.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent',
template : '<app-child></app-child>',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
constructor() { }
dynamicFunction(){
console.log('parent 1 clicked');
}
ngOnInit() {
}
}
parent2.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent2',
template : '<app-child></app-child>',
styleUrls: ['./parentTwo.component.css']
})
export class ParentTwoComponent implements OnInit {
constructor() { }
dynamicFunction(){
alert('parent 2 was called');
}
ngOnInit() {
}
}