Question

我有这个傻瓜：

https://plnkr.co/edit/5XbuxoGG6NqomayLP4Ae?p=preview

我有这个：

> @Component({   selector: 'my-app',   template: `
>     <layout [child]="childModal">
>      <div class="body">
>       <common-modal  #childModal [title]="'common modal'"> 
>     <div class="modal-body">
>     {{5+7}} {{item}}
>     Hi heloo </div>
>     </common-modal> 
>      </div>
>     </layout>
>     <button type="button" class="btn btn-primary" (click)="childModal.show()">Open modal</button>
>    
> 
>   `, })

export class AppComponent {
  @ViewChild('childModal') childModal :CommonModalComponent;
  item:number=150;
  constructor(private viewContainerRef: ViewContainerRef) {
  }

}

如何在布局组件中我可以从App组件设置项目。有什么建议吗？我的问题是如果我没有父子组件和其他一些组件，如何从父设置子变量。

<parent>
<some-other-component></some-other-component>
</parent>

我没有孩子的选择器。如何更改AppComponent中项目的布局组件值？

编辑：这就是我想要做的事情： https://plnkr.co/edit/BVS2AlQNZ7kO5wbsTBaA?p=preview

但由于某些原因，排放不起作用。

Answer 1

您需要为布局组件内的项创建一个输入变量，并为您的应用程序组件发出一个输出变量来处理它并更改项变量的值。

<强> AppComponent ：

@Component({
  selector: 'my-app',
  template: `
    <layout [child]="childModal" [item]="item" (itemChange)="onItemChange($event)">
     <div class="body">
      <common-modal  #childModal [title]="'common modal'"> 
        <div class="modal-body">
          {{5+7}} {{item}}
          Hi heloo
        </div>
      </common-modal> 
     </div>
    </layout>
    <button type="button" class="btn btn-primary" (click)="childModal.show()">Open modal</button>


  `,
})
export class AppComponent {
  @ViewChild('childModal') childModal :CommonModalComponent;
  item:number=150;
  constructor(private viewContainerRef: ViewContainerRef) {
  }
  onItemChange(item) {
    this.item = item;
  }
}

<强>布局：

import {Component,Input, Output, ViewChild, EventEmitter} from '@angular/core';
import { ModalDirective } from 'ng2-bootstrap/ng2-bootstrap';

@Component({
  selector: 'layout',
  template: `
    <div class="modal-body">
    <button (click)="show()">CLICKKK</button>
        <ng-content select="div.body"></ng-content>
      </div>
  `,
})
export class Layout {
   @Input() title?:string;
   @Input() child;
   @Input() item;
   @Output() itemChange: EventEmitter = new EventEmitter;
  constructor() {
  }
  show() {
   this.item = 200;
   this.child.show();
   this.itemChange.emit(this.item);
  }

}

修改我想你还没有理解我的答案......所以看一下这个链接：https://plnkr.co/edit/mFcoiXqFedN1RO7tsETX?p=preview

我编写了它并添加了一些注释来解释。

如何设置来自父母的孩子的价值？

1 个答案: