Question

我有列表组件，将组项目列为表格。其中一个链接是允许用户编辑项目。编辑项目是单独的组件。当用户点击编辑时，我需要传递现有数据来编辑组件。我怎么能这样做？

这是我的列表组件

    <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>

这是我的列表组件

＆＃13;

import { Component, OnInit,Input } from '@angular/core';
import { Group } from '../groupModel';
import { GroupsService } from '../groups.service';

@Component ({
    selector: 'groups-lst',
    moduleId: module.id,
    templateUrl: 'groups-list.component.html'
    //styleUrls: ['groups.component.css']
})

export class GroupsList implements OnInit{

    constructor(private _groupsService: GroupsService) {}

    title: string = 'Groups List';
    listFilter: string = '';
    errorMessage: string;
    
    groups: Group[];

        ngOnInit():void{
            this._groupsService.getGroups()
            .subscribe (group => this.groups = group,
            error => this.errorMessage = <any>error);
        }

}

＆＃13;

Answer 1

您提及的方法有一个重要之处。看起来您正在考虑将模型实例传递给路由器的方法。这不可能按设计（当然，有很多方法可以使用服务作为中介，但不建议这样做。）

您应该考虑一下，您在网格中显示的记录可能（并且应该）具有标识符，就像普通的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>

在你的＆＃34;编辑组件＆＃34;您可以使用传递的参数来获取组实体：

private route$ : Subscription;
constructor(private route : ActivatedRoute) {}

ngOnInit() {
   this.route$ = this.route.params.subscribe(
   (params : Params) => {
      let id = params["id"];
      // fetch the group entity from service / store
   });
}

当然，您需要配置路线以识别id参数：

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

Answer 2

如果组件与层次结构不相关（除了在同一个应用程序中），允许订阅主题的服务就是我通常采用的方式。

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

请注意，该服务可用于所有内容。但是，我通常发现自己同时使用两者。

两者都有大量的文档和大量的样本（其中一些我直接写在SO上）。您需要的信息绝对可用于各种问题。如果这个问题没有得到重叠旗帜，我会感到惊讶。

这是一个非常简单的主题服务示例，您可以将其注入任何需要＆＃34;听到＆＃34;通知：

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 }

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

2 个答案: