Question

在我的应用程序中，我创建了一个下拉组件，它是常用组件，用于所有页面。当我在下拉列表中更改值时，我想调用其他组件的方法，并希望在其html中仅显示结果，而不是在父组件中显示结果，即下拉组件。我无法在子组件中打印结果。这里的约束我不想在我的父组件中使用子选择器来执行该方法。任何帮助将不胜感激。我的代码看起来像这样。

dropdown.component.html

<ss-multiselect-dropdown [options]="sectionType" class="col-lg-10" [(ngModel)]="optionsModel" (change)="getdropdowndata(optionsModel)">
</ss-multiselect-dropdown>

dropdown.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { AssignmentHeadComponent } from './../instructor/assignment-head/assignment-head.component';

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent implements OnInit {
}

constructor(private assignHead:AssignmentHeadComponent) {}

ngOnInit() {  }

  getdropdowndata(event){
    this.sectionId = event;
    this.assignHead.getdata(this.sectionId);
 }

赋值head.component.ts

import { DropdownComponent } from './../../dropdown/dropdown.component';
import { Component, OnInit, Input, Output, EventEmitter, ViewChild } from '@angular/core';

@Component({
  selector: 'app-assignment-head',
  template:`<div id="data_dv"><div #dataContainer >{{val}}</div></div>`,
  styleUrls: ['./assignment-head.component.css']
})

export class AssignmentHeadComponent implements OnInit {
val:any;
getdata(data){
    this.val = data;
console.log(this.val);
alert(this.val); // alert and console.log able to print the result but not able to display in html.
}

}

请分享您的有效答案。在此先感谢。

Angular 2-在子组件上调用方法并在子组件中显示结果，而不在父组件中包含子选择器

0 个答案: