Angular 在角度4中的组件之间传递数据

我有一个列表组件，它将组项列为表。其中一个链接是“允许用户编辑项目”。编辑项是单独的组件。当用户单击编辑时，我需要将现有数据传递给编辑组件。我该怎么做

这是我的列表组件

    <div class='table-responsive'>
    <table class='table' *ngIf='groups && groups.length'>
        <thead>
            <tr>
                <th>Avatar Image</th>
                <th>Display Name</th>
                <th>Description</th>
                <th>Member Count</th>
                <th>Total Post</th>
                <th>Last Modify Date</th>
                <th></th>
            </tr>
        </thead>
        <tr *ngFor='let group of groups | groupFilter:listFilter'>
            <td><img [src]='group.group_avatar_image' class="img-responsive" style="max-height: 50px;"></td>
            <td><a [href]='group.url'>{{group.display_name}}</a></td>
            <td>{{group.description}}</td>
            <td>{{group.total_members_count}}</td>
            <td>{{group.total_posts}}</td>
            <td>{{group.updated_at | date: 'dd/MM/yyyy'}}</td>
            <td><a href="#"  [routerLink]="['/Edit Group']">Edit</a></td>
        </tr>
    </table>
</div>

化身图像
显示名称
描述
会员人数
总员额
最后修改日期
{{group.description}}
{{group.total{u members}}
{{group.total_posts}
{{group.updated|u日期：'dd/MM/yyyy'}

这是我的列表组件

从'@angular/core'导入{Component，OnInit，Input}；
从“../groupModel”导入{Group}；
从“../groups.service”导入{GroupsService}；
@组成部分({
选择器：“组lst”，
moduleId:module.id，
templateUrl:“组列表.组件.html”
//样式URL:['groups.component.css']
})
导出类GroupsList实现OnInit{
构造函数（私有_groupsService:groupsService）{}
标题：字符串='组列表'；
listFilter:string=''；
错误消息：字符串；
组：第[]组；
ngOnInit（）：void{
这个._groupsService.getGroups（）
.subscribe（group=>this.groups=group，
error=>this.errorMessage=error）；
}
}

如果组件与层次结构无关（而不是在同一个应用程序中），我通常会使用允许订阅主题的服务

如果组件很容易按层次（父/子）关联，则可以使用输出

请注意，该服务可用于所有用途。然而，我发现自己通常会同时使用这两种方法

两者都有大量的文档和成堆的样本（其中一些我就写在这里）。你需要的信息在各种各样的问题中都可以找到。如果这个问题没有被愚弄，我会感到惊讶

下面是一个非常简单的主题服务示例，您可以将其注入任何需要“听到”通知的组件中：

const Notes = {
    SOME_NAMED_EVENT : 'some_named_event',
    ... (more named events)
};

class Note {
    constructor ( name = '', data = {} ) {
        this.name = name;
        this.data = data;
    }
}

// Example of a subscription/notification style service,
// as opposed to a service that just calls a callback
class NotifierService {

    constructor() {
        let Rx = require ( 'rxjs' );
        this.subject = new Rx.Subject ( );
    }

    subscribe ( callback ) {
        return this.subject.subscribe ( b => callback ( b ) );
    }

    sendNote ( note ) {
        this.subject.next ( note );
    }
}
export { NotifierService, Notes, Note }

---

如果组件之间没有层次关系（除了在同一个应用程序中），我通常会使用一个允许订阅主题的服务

如果组件很容易按层次（父/子）关联，则可以使用输出

请注意，该服务可用于所有用途。然而，我发现自己通常会同时使用这两种方法

两者都有大量的文档和成堆的样本（其中一些我就写在这里）。你需要的信息在各种各样的问题中都可以找到。如果这个问题没有被愚弄，我会感到惊讶

下面是一个非常简单的主题服务示例，您可以将其注入任何需要“听到”通知的组件中：

const Notes = {
    SOME_NAMED_EVENT : 'some_named_event',
    ... (more named events)
};

class Note {
    constructor ( name = '', data = {} ) {
        this.name = name;
        this.data = data;
    }
}

// Example of a subscription/notification style service,
// as opposed to a service that just calls a callback
class NotifierService {

    constructor() {
        let Rx = require ( 'rxjs' );
        this.subject = new Rx.Subject ( );
    }

    subscribe ( callback ) {
        return this.subject.subscribe ( b => callback ( b ) );
    }

    sendNote ( note ) {
        this.subject.next ( note );
    }
}
export { NotifierService, Notes, Note }

---

关于你的方法，有一点很重要。看起来您正在考虑一种将模型实例传递给路由器的方法。这在设计上是不可能的（当然，也有类似使用服务作为中介的方法，但不推荐这样做）

您应该考虑，网格中显示的记录可能（并且应该）具有标识符，就像普通的

id

属性一样。最常见的做法是将该标识符作为参数传递给路由，然后再次从源获取实体

网格组件：

<tr *ngFor='let group of groups | groupFilter:listFilter'>
   <td><img [src]='group.group_avatar_image' class="img-responsive" style="max-height: 50px;"></td>
   <td><a [href]='group.url'>{{group.display_name}}</a></td>
   <td>{{group.description}}</td>
   <td>{{group.total_members_count}}</td>
   <td>{{group.total_posts}}</td>
   <td>{{group.updated_at | date: 'dd/MM/yyyy'}}</td>
   <td><a href="#"  [routerLink]="['/Edit', group.id]">Edit</a></td>
</tr>

当然，您需要配置路线以识别

id

参数：

export const routes = [
    ...
    { path : 'Edit/:id', component : ...},
    ...
];

---

关于你的方法，有一点很重要。看起来您正在考虑一种将模型实例传递给路由器的方法。这在设计上是不可能的（当然，也有类似使用服务作为中介的方法，但不推荐这样做）

您应该考虑，网格中显示的记录可能（并且应该）具有标识符，就像普通的

id

属性一样。最常见的做法是将该标识符作为参数传递给路由，然后再次从源获取实体

网格组件：

<tr *ngFor='let group of groups | groupFilter:listFilter'>
   <td><img [src]='group.group_avatar_image' class="img-responsive" style="max-height: 50px;"></td>
   <td><a [href]='group.url'>{{group.display_name}}</a></td>
   <td>{{group.description}}</td>
   <td>{{group.total_members_count}}</td>
   <td>{{group.total_posts}}</td>
   <td>{{group.updated_at | date: 'dd/MM/yyyy'}}</td>
   <td><a href="#"  [routerLink]="['/Edit', group.id]">Edit</a></td>
</tr>

当然，您需要配置路线以识别

id

参数：

export const routes = [
    ...
    { path : 'Edit/:id', component : ...},
    ...
];