Question

我有下一个模板：

   <table width="700">
    <caption>All Users</caption>
    <thead>
        <tr>
            <th>name</th>
            <th>surname</th>
            <th>age</th>
            <th>action</th>
        </tr>
    </thead>
    <tbody>
        <tr  *ngFor="let user of users">
            <td [class] = "user">{{ user.name}}</td>
            <td >{{ user.surname}}</td>
            <td >{{ user.age}}</td>
            <td>
                <a  routerLink = "{{user.id}}" class="btn btn-info"><strong (click) = "clickShow(user)">show</strong></a>
            </td>
        </tr>
    </tbody>
</table>

和控制器：

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

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

json = `[{
    "id": 1,
    "name" : "John",
    "surname" : "Walsh",
    "age" : "23"
},{
    "id": 2,
    "name" : "Mike",
    "surname" : "Mikic",
    "age" : "25"
}]`;

users = JSON.parse(this.json);
user: any;
constructor(){
}
   clickShow(user){
      this.user = user;
   }

ngOnInit() {
   }

  }

当点击按钮显示到另一个组件时，我需要传递有关当前用户的数据。这是我的另一个组件视图：

<h1>Show user</h1>
<span>{{ user.name }}</span>
<span>{{ user.surname }}</span>
<span>{{ user.age }}</span>

和控制器：

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

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

    @Input() user;

    constructor() { 
    }
    ngOnInit() {
    }

}

我尝试传递数据，但是当我这样做时：

 <a  routerLink = "{{user.id}}" class="btn btn-info"><strong [user] = "user" (click) = "clickShow(user)">show</strong></a>

我收到了错误：无法绑定到用户＆＃39;因为它不是“强大的”

的已知属性

如何将对象用户与另一个组件约会以及如何渲染它？

Answer 1

子组件是另一个组件（父组件）中的组件。我不认为这就是你想要的。使用routerLink，您将尝试显示详细信息页面。

routerLink将您的用户发送到新页面，并使用新的网址，例如。 /用户/ 1 除了点击你的链接，他们可以直接访问该网址（例如，如果它被加入书签）。所以你不能只在内部传递用户对象。

相反，他们从url（路由）获取用户ID，然后将该用户加载到detail组件中。您可能有一个用户服务来进行加载，以便两个组件都可以共享该代码。

Angular2中的绑定数据

1 个答案: