时间戳

首页 > 解决方案 > 角 5 输入输出

input - 角 5 输入输出

问题描述

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

app.component.ts

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);
  }
}

登录组件.ts

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(['*']);
  }

}

导航组件.ts

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.component.html

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

标签： inputoutputangular5

解决方案

推荐阅读