将子组件变量与父组件中的下拉列表绑定 Angular 4

Question

我是 Angular 4 的新手，正在使用 MEAN 堆栈开发应用程序。我的父组件是 admin，子组件是 session。我试图在插入会话方法中基于子组件 value.I 设置父组件中的下拉值是相同的输出发射器事件。但是我无法设置下拉列表的值。请帮助。

管理员html

    <div>
        <label for="FormType" class="col-sm-2 col-form-label">Select Type </label>
         <select #s (change)="setNav(s.value)">
        <option *ngFor="let item of dms" >{{item}}</option>
        </select>
    </div>
    <div *ngIf="regTypeSelectedOption==='Session'">
    <code for session></div>

    <div *ngIf="regTypeSelectedOption==='webinar'">
    <code for webinar>
    </div>
<div (notify)='onNotify($event)'></div

admin.ts

onNotify(message: string):void{
    this.setNav(message);
    alert(JSON.stringify(message));
    }
setNav(nav:any){  
        this.selectedNav = nav;
            if(this.selectedNav == "Session"){
              this.regTypeSelectedOption = "Session";}
            else if(this.selectedNav == "Webinar"){
                  this.regTypeSelectedOption = "Webinar";
            }
            else if (this.selectedNav == "Select"){
                  this.regTypeSelectedOption = "Select";
            }
}

session.ts

export class SessionComponent implements OnInit {
insertSession(sessionForm){
  this.newSession.deliveryMethod = this.regTypeSelectedOption;
  this.newSession.formType = "Session";
  let updatedresult;
  if(this.updatedid == undefined){
    this.dataService.insertNewSession(this.newSession)
    .subscribe(
         res =>{ this.sessions = res;
          console.log('response', res)},
         err => this.apiError = err,
         () => {
            this.notify.emit('Session');
            this.router.navigate(['/admin']);
          }
      )

我在 div 的父级中使用通知事件。如果我将通知事件与会话组件的选择器一起使用，则会显示整个会话组件

Answer 1

我认为您想将消息从一个组件发送到另一个组件，而不使用父组件中的子组件。

我查看了您的代码，发现您在选择后导航至“/admin”。

我宁愿建议您在 app.routing.ts 中注册一条路线，如下所示

{path:'/admin/:id',component:AdminComponent}

在 Admin 组件 中使用下面的代码从路由中获取数据。

 import {Router, NavigationEnd, ActivatedRoute,Params } from "@angular/router";

在Admincomponent中实现OnInit并添加下面的代码来读取路由值

ngOnInit(){

    this.activatedRoute.params.subscribe((params: Params) => {

        this.params = this.activatedRoute.params;
        this.regTypeSelectedOption= this.params.value.id != undefined ? this.params.value.id : "";

    });

}

现在在 ChildComponent 中，替换下面的代码：

 //this.notify.emit('Session');
        this.router.navigate(['/admin/Session']);

现在，当插入会话时，它会将您路由回具有会话 ID 的 AdminComponent

将子组件变量与父组件中的下拉列表绑定 Angular 4

binding childcomponent variable with dropdown in parent component Angular 4

html

css

mean-stack

angular