Возможно ли в Angular динамически привязать событие щелчка от компонента к существующему компоненту на странице. Для иллюстрации я прилагаю этот снимок экрана.
Приложение теперь состоит из 4 простых компонентов; Один компонент оболочки, который определяет глобальный макет, в компоненте оболочки у меня есть компонент заголовка (синий контур) и компонент навигации (красный контур). Зеленый компонент - это компонент, загруженный текущим маршрутом.
Я обновляю компонент навигации с помощью простой службы, например:
@Injectable({ providedIn: 'root' })
export class NavigationService {
private titleSource = new Subject<string>();
private actionsSource = new Subject<ActionButton[]>();
private menuItemsSource = new Subject<MenuItem[]>();
title = this.titleSource.asObservable();
actions = this.actionsSource.asObservable();
menuItems = this.menuItemsSource.asObservable();
constructor() {
}
setTitle(title: string) {
this.titleSource.next(title);
}
setActions(actions: ActionButton[]) {
this.actionsSource.next(actions);
}
setMenuItems(menuItems: MenuItem[]) {
this.menuItemsSource.next(menuItems);
}
}
Компонент навигации просто использует эту службу следующим образом:
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html'
})
export class NavigationComponent implements OnInit {
title: string = "";
actions: ActionButton[] = [];
menuItems: MenuItem[] = [];
constructor(private navigation: NavigationService) {
navigation.title.subscribe((title) => this.title = title);
navigation.actions.subscribe((actions) => this.actions = actions);
navigation.menuItems.subscribe((menuItems) => this.menuItems = menuItems);
}
}
И отображает это так:
<div class="navigation">
<div *ngIf="title.length" class="navigation__title">
<h1>{{title}}</h1>
</div>
<div class="navigation__menu">
<ul>
<li *ngFor="let menuItem of menuItems" [routerLinkActive]="['active']">
<a routerLink="{{menuItem.path}}">{{menuItem.title}}</a>
</li>
</ul>
</div>
<div class="navigation__actions">
<a *ngFor="let actionButton of actions" class="btn btn--primary">{{actionButton.title}}</a>
</div>
</div>
Затем в активированном в данный момент компоненте (зеленом) я устанавливаю заголовок и такие элементы, как этот
....
constructor(private employeeService: EmployeeService, private navigation: NavigationService, private drawerService: NzDrawerService) {
navigation.setTitle('');
navigation.setActions([
{
path: '',
title: 'Add Employee'
}
]);
navigation.setMenuItems([
{
path: '/employees',
title: 'Employees'
},
{
path: '/teams',
title: 'Teams'
}
]);
}
....
В этом же активном компоненте я также определил этот метод:
createEmployee() {
const drawer = this.drawerService.create<CreateEmployeeComponent>({
nzContent: CreateEmployeeComponent,
nzClosable: false,
nzWidth: '33%',
});
drawer.afterClose.subscribe(data => {
this.loadEmployees();
});
}
Теперь мой вопрос: можно ли каким-либо образом вызвать этот метод, когда я нажимаю кнопку, отображаемую в моем компоненте навигации. А также установите его динамически из текущего активированного компонента, как я уже делаю для заголовка и элементов навигации.
