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创建了一个输入参数[event]，它没有这样的输入参数。

与“app module”通信是行不通的

1 个答案: