时间戳

首页 > 解决方案 > 如何将一个组件表单输入的值发送到Angular 6中的另一个组件？

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

问题描述

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

登录组件.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>

登录组件.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;
     }

标签： angular6

解决方案

如果您使用的两个组件之间没有关系，您可以定义一个包含用户名的服务并将您的用户名分配给 LoginComponent 中的该字段，然后在 HomeComponent 的 ngOnInit 上将其取回，这应该符合您的预期。

推荐阅读