子组件到父组件通信没有子项嵌套在角度模板中（Angular 2）

3 回答

• 1

  如果你去that plunker，你会发现它们具有以下结构：

  <radio-ng-model-example>
      <md-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
          <md-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
              {{season}}
          </md-radio-button>
      </md-radio-group>
      <div class="example-selected-value">Your favorite season is: {{favoriteSeason}}</div>
  </radio-ng-model-example>
  

  radio-ng-model-example 是根组件 . 因此，他们使用 EventEmitter 在 md-radio-button 和 md-radio-group 之间进行通信，并使用 ngModel 在 md-radio-group 和 radio-ng-model-example 之间进行通信 .

  回复于 2024-04-27T04:19:10+08:00
• 1

  当子组件不是父模板的一部分时，它们基本上是内容子组件 . 它们的范围在Parent组件中 .

  例如，如果您有一个名为 my-component 的组件，并且在其模板中有类似下面的内容，

  <parent [input]='somevar1' (output)='somemethod1()' >
     <child [input]='somevar2' (output)='somemethod2()' ></child>
  </parent>
  

  somevar1 ， somevar2 ， somemethod1 ， somemethod2 来自 my-component 的范围 .

  基于这种理解，可以非常安全地说 parent 和 child 可以被视为 my-component 范围内的兄弟姐妹 . 因此，您可以使用 my-component 范围在这两者之间进行通信 .

  例，

  @Component({
    selector: 'parent',
    template: `<h1>Parent</h1>
    {{awesomeInput}}
    <hr />
    <ng-content></ng-content>
    `
  })
  export class ParentComponent { 
     @Input() awesomeInput: string;
  }
  

  子组件，

  @Component({
    selector: 'child',
    template: `<h1>Child</h1>
    <button (click)='sendAwesomeOutput()'>Click me!!</button>
    `
  })
  export class ChildComponent {
    @Output() awesomeOutput =  new EventEmitter();
  
    sendAwesomeOutput(){
      this.awesomeOutput.next('awesome output from child!!');
    }
  }
  

  在模板中使用上述组件的组件 .

  @Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>
    <hr />
    <parent [awesomeInput]="defaultInput" >
       <child (awesomeOutput)="getOutputFromChild($event)" ></child>
    </parent>
    `
  })
  export class AppComponent { 
    name = 'Angular';
    defaultInput = 'default value for parent';
  
    getOutputFromChild(val){
      this.defaultInput = val;
    }
  }
  

  Update

  如果你在parent-Child之间传递值，你可能没什么创意，并且可以在模板本身中完全做到 . 更新了Plunker !!

  <parent awesomeInput="{{child1.awesomeOutput | async }}" >
       <child #child1 ></child>
  </parent>
  

  如果你必须处理任何事情，上面的那个考虑场景 .

  看看这个Plunker !!

  希望这可以帮助！！

  回复于 2024-04-27T04:19:10+08:00
• 1

  回答 Headers 问题而不使用ngModel，bindings或EventEmitter（因为它不能在模板之外工作），并且足够灵活，可以在每个子组件中包含任何类型的内容，在Angular 2.4中，这是其他实现的另一种方法：

  Example:
  "Presenters"在Odin议会（"Organizer"） . 只有一位演示者可以一次说话（出现） . 接下来的人，向组织者发出他们意图的信号，组织者阻止其他主持人说话，这样新的主持人就可以恢复他们的演讲 .

  （演示截图减去额外的嵌套内容:)

  
  单击任何按钮会导致所有演示者隐藏，但您只是单击了该演示者 .

  Usage:

  <organizer>
      <presenter>
          <h2>Thor</h2>
          <summary>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ea nisi impedit aspernatur sint voluptatum odit aperiam, soluta, explicabo, nesciunt earum quo. Vel quod, ratione ullam deserunt commodi quaerat fugiat!</summary>
          <asgardian-power-point></asgardian-power-point>
      </presenter>
      <presenter>
          <h2>Loki</h2>
          <summary>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ea nisi impedit aspernatur sint voluptatum odit aperiam, soluta, explicabo, nesciunt earum quo. Vel quod, ratione ullam deserunt commodi quaerat fugiat!</summary>
          <interjection></interjection>
          <lies></lies>
      </presenter>
      <presenter>
          <h2>Sif</h2>
          <summary>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt ea nisi impedit aspernatur sint voluptatum odit aperiam, soluta, explicabo, nesciunt earum quo. Vel quod, ratione ullam deserunt commodi quaerat fugiat!</summary>
          <asgardian-power-point></asgardian-power-point>
      </presenter>
  </organizer>
  

  organizer.component.html:

  <ng-content></ng-content>
  

  organizer.component.ts:

  import {
      Component,
      ContentChildren,
      QueryList
  } from '@angular/core';
  
  import { PresenterComponent } from '../presenter/presenter.component';
  
  @Component({
      selector: 'organizer',
      templateUrl: './organizer.component.html',
      styleUrls: ['./organizer.component.scss']
  })
  
  export class OrganizerComponent {
  
      @ContentChildren(PresenterComponent) presenters: QueryList<PresenterComponent>;
  
      stopPresenters() {
          this.presenters.forEach(function(item) {
              item.conclude();
          });
      }
  
  }
  

  presenter.component.html:

  <div style="overflow:hidden;" [style.height]="expand ? 'auto' : '30px'">
      <button (click)="present()">Present</button>
      <ng-content></ng-content>
  </div>
  

  presenter.component.ts:

  import {
      Component,
      Input,
      Inject,
      forwardRef
  } from '@angular/core';
  
  import { OrganizerComponent } from '../organizer/organizer.component';
  
  @Component({
      selector: 'presenter',
      templateUrl: './presenter.component.html',
      styleUrls: ['./presenter.component.scss']
  })
  
  export class PresenterComponent {
  
      constructor(@Inject(forwardRef(() => OrganizerComponent)) private organizer:OrganizerComponent) {}
  
      @Input() expand: boolean = false;
  
      present() {
          this.organizer.stopPresenters();
          this.expand = true;
      }
  
      conclude() {
          this.expand = false;
      }
  
  }
  

  回复于 2024-04-27T04:19:10+08:00