не работает связь с `app module`

Question

У меня есть модальное всплывающее окно. Исходя из этого, я пытаюсь общаться с родителем (модуль приложения), наконец, я думаю, что нет никакого способа. Но все же, чтобы уточнить, я задаю этот вопрос.

вот мой шаблон приложения:

 <div class="wrapper" [event]="clickedEvent" >
  <header>
    <app-header #dropDownValue></app-header>
  </header>
  <section>
    <router-outlet></router-outlet>
    <app-category-menu [hideDropDownMenu]="dropDownValue.dropDown" ></app-category-menu>
      <footer>
        <app-footer></app-footer>
      </footer>
  </section>
  <app-cookie-model (eventClicked)="clickedEvent()" ></app-cookie-model>
</div>

компонент приложения ts:

import { Component, OnInit, Input } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

    cookieValue = 'UNKNOWN';

    constructor( private cookieService:CookieService ){}

    ngOnInit():void{
        this.cookieService.set( 'retailAppCookies', 'Hello AppCookie' );
        this.cookieValue = this.cookieService.get('retailAppCookies');
    }

    @Input() clickedEvent(){
        alert('hi'); //not getting any alert
    }

}

мои модальные тс:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { CookieService } from 'ngx-cookie-service';

@Component({
  selector: 'app-cookie-model',
  templateUrl: './cookie-model.component.html',
  styleUrls: ['./cookie-model.component.scss']
})
export class CookieModelComponent implements OnInit {

    cookieAlert:boolean = true;

    @Output() eventClicked = new EventEmitter<Event>(); //not triggering!!

    constructor(private cookieService:CookieService) { }

    ngOnInit() {
        // console.log( this.cookieService.get('retailAppCookies'))
    }

    cookieAgreed(){
        this.eventClicked.emit();
    }

}

получить ошибку как:

Uncaught Error: Template parse errors:
Can't bind to 'event' since it isn't a known property of 'div'. ("<div class="wrapper" [ERROR ->][event]="clickedEvent" >

Answer 1

Родитель может общаться с детьми, используя ViewChild (), но не наоборот, так как ребенок ничего не знает о своем родителе ...

Но у вас есть выходное событие (eventClicked) - вы можете прослушать его у своего родителя и при необходимости выполнить некоторые действия.

Также вы можете использовать сервис для установления связи между этими компонентами.

И, наконец, вы можете использовать Redux, если хотите иметь одно хранилище данных между всеми компонентами.

Но здесь у вас совершенно другая проблема. Вы создали входной параметр [событие] для div, у которого нет такого входного параметра.