Input 角度5输入输出

在我的应用程序中，导航组件中有一个工具栏。此导航组件是app.component的一部分，以及其他组件的显示位置。我有一个登录页面，我想在其中将变量传输到app.component，然后根据变量更改工具栏。从登录组件，我通过@output和eventemitter传输变量，但在app.component中，我没有接收到它。代码如下

app.component.ts

---

login.component.ts

---

navi.component.ts

---

app.component.html

---

能否添加（精简）版本的app.component.html，以显示登录组件如何包含在app组件中？@MarkHughes added app.component.html登录组件似乎不存在。。。它是如何包含的？它是通过路由器输出的。工具栏中有一个链接，用于在routeroutlet中加载登录组件。您可以将路由模块添加到问题中吗？我的理解是@Output decorators仅在通过模板（例如

）包含组件时才起作用，而不是通过路由输出。

import { Component, OnInit } from '@angular/core';

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

  myrole = 'NoUser';

  ngOnInit() {
    console.log(this.myrole);
  }
}

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';


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

  Name: string;
  Pass: string;
  @Output() myrole = new EventEmitter();

  constructor(private rout: Router) { }

  ngOnInit() {

  }

  OnName(event: any)
  {
    this.Name = event.target.value;
    if (this.Name === 'admin' || this.Name === 'Admin') {
      this.myrole.emit('admin');
    } else if (this.Name === 'user' || this.Name === 'User') {
      this.myrole.emit('user');
    } else {
      this.myrole.emit('NoUser');
    }
    console.log(this.myrole);
  }

  onPass(event: any)
  {
    this.Pass = event.target.value;
  }

  Submit() {

    this.rout.navigate(['*']);
  }

}

import { Component, OnInit, Input } from '@angular/core';

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

@Input() myrole: string;

  ngOnInit(): void {
    console.log(this.myrole);
}
}

<app-navi [myrole]='myrole'></app-navi>
<br>
<router-outlet></router-outlet>