Question

我正在尝试通过路由到一个组件（视图）中的表单的数据到另一个完全不同的组件中的另一个组件，但是当我在此视图中检查我的控制台时它只显示未定义的（附加到提交按钮日志打印出控制台上的数据）。我点击了一个按钮，它将我发送到第二条路线，但我也使用数据服务将其中一个表单字段中的信息发送到另一条路线。发件人组件

    import { Component, OnInit, Injectable} from '@angular/core';
    import { Router } from '@angular/router';
    import { Data }  from './data';

    @Component({
      selector: 'home-app',
      templateUrl: 'home.component.html',
      styles: [`
      i{color:white;margin-left:-90px;margin-top:2px;margin-right:12px;}
      .logo{margin-top:-10px;}
      #banner{margin:-18px;margin-top:-70px;transform:scaleY(0.85)}
      #btn{transform:scale(1.4)}
      #img{margin: 0; padding: 0;display: inline-block;vertical-align:top;}
      #imgcontainer p{ font-size: 32px; margin-left:-107px;}
      #imgcontainer{cursor:pointer}
      `],
    })
    @Injectable()
    export class HomeComponent implements OnInit{
       public userName;
       onSubmit(){
         console.log(this.userName);
         this.router.navigate(['/makeyourlist'])
       }
    public constructor(private router: Router,private userData: Data){    
    this.userData.name = this.userName;
    }
     ngOnInit() { }
    }

service.ts代码

    import { Injectable } from '@angular/core';
    @Injectable()
    export class Data{
       public name: any;
       public constructor() { }
    }

接收器组件

            import { Component, OnInit } from '@angular/core';
            import { Router } from '@angular/router';
            // import { NameService } from './name.service';
            import { Data }  from './data';
            import { HomeComponent } from './home.component';

            @Component({
                selector: 'to-do',
                templateUrl: 'todo.component.html',
                styles: [`
                   .body{background-color: #F4F4F4}
                   i{color:black;}
                   .logo{margin-top:-10px; padding:0;margin:0}
                   #img{transform:scale(0.4);margin-left:0px; 
                       padding:0;margin:0}
                   #side{background-color:grey;color:white;height:100%}
                   #i{font-size:20px;}

                `],

             })

             export class ToDoComponent implements OnInit{
                user(){
                    alert(this.userData.name);
                }
                public constructor(private userData:Data) {
                  console.log(this.userData.name);
                }
                ngOnInit() {}
             }

Answer 1

不要在组件中使用装饰器@Injectable()。它仅适用于服务。

我看到你正在尝试使用service.ts在组件之间共享数据。

没关系。这是“共享服务”。

这里很好地描述了

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

将表单字段的数据（值）从角度2中的一个路径传递到另一个路径

1 个答案: