Question

我想在单击按钮后通过路由将在登录组件中输入的用户名显示给home组件。

logincomponent.html

  <form>
     <label for="">User Name</label>
     <input type="text" #uname><br><br>
     <label for="">Password</label>
     <input type="password"><br><br>
     <button (click)="login(uname.value)">Login</button>
  </form>

logincomponent.tc

   constructor(private router:Router) { }
     ngOnInit() {
     }

     login(uname:string){
       this.router.navigate(['home']);
       //alert(uname);
       //  console.log(uname);
    }

homecomponent.html

    <h3>Welcome to {{ userName }}</h3>

homecomponent.ts：

    constructor(private route:ActivatedRoute) { }
     userName : string;
     ngOnInit() {
       this.userName = this.route.snapshot.params.uname;
     }

Answer 1

如果您正在使用的两个组件之间没有关系，则可以定义一个包含用户名的服务，并将您的用户名分配给LoginComponent中的该字段，然后将其返回到HomeComponent的ngOnInit上，这应该可以完成您期望的操作

如何将一个组件的输入值发送到Angular 6中的另一个组件？

1 个答案: