Question

我已经和Angular合作了几个月了，并且开始注意到一些主要细节的模式，细节是一些编辑形式。

父级 - 子组件模式 如果我的详细信息组件是主组件的子组件，我可以简单地使用输入选择对象并绑定属性并隐藏显示不同的组件，这种模式似乎工作得很好

父级 - 模态模式 与上面相同，但通常使用一个组件，只是在模态中加载行

路线参数模式 如果我的细节不是孩子并且我使用路由器，那么这只接受一个字符串，所以我传递id并发现自己必须进行api调用才能获得所选对象，因为路由参数仅支持字符串而不传递宾语。这似乎是一个用例，当时父母可能不包含细节或表单所需的所有属性。

共享服务模式 使用服务在两个组件之间共享数据

我想念的任何想法或其他模式？

Answer 1

根据您的实施情况，您可以在服务中“缓存”您的数据。

@Component({})
export class Component1{
    constructor(service: Service, router: Router){}

    onSomeAction(id){
        this.service.getEntityById(id);
    }

    redirectToDetails(id: number){
         this.router.navigate(["/details", id]);
    }
}

@Component({})
export class Component2() implements OnInit{

    public entity: Entity;

    constructor(service: Service, acivatedRoute: ActivatedRoute){}

    ngOnInit(){
        this.service.getEntityById(this.activatedRoute.getParams().get("id")).subscribe((entity) => {
            this.entity = entity;
        });
    }
}

@Injectable()
export class Service{

    public knownEntities: Map<number, Entity> = new Map<>();

    constructor(resource: Resource){
    }

    getNewEntityById(id: number): Observable<Entity>{
        return this.resource.getEntityFromBackendById().map((data) => {
            let entity: Entity = data.json();
            this.knownEntities.push(id, entity);
            return entity;
        });
    }

    getEntityById(id: number): Observable<Entity>{
        let knownEntity: Entity = this.knownEntities.get(id);
        if(knownEntity){
             return Observable.of(knownEntity);
        }else{
             return this.getNewEntityById(id);
        }
    }
}

另一种方法 - 拥有自己的RouterParameterService服务作为全局变量

@Inject()
export class RouterParameterService(){

    private _routerParam: any;

    public set routerParam(value: any){
        this._routerParam = value;
    }

    public get routerParam(): any{
        if(!this._routerParam){
            throw Error("No Router param set");
        }
        let tmp = this._routerParam;
        this._routerParam = null;
        return tmp;
    }
}

@Component({})
export class Component1(){

    constructor(service: RouterParameterService, router: Router){}

    navigateAction(){
        this.service.routerParam = {id: 1, fName: "A", lName = "Tim"};
        this.router.navigate("/details");
    }
}

@Component({})
export class Component2() implements OnInit{

    public entity: any;

    constructor(service: RouterParameterService){}

    ngOnInit(){
        this.entity = this.service.routerParam;
    }
}

Angular 2/4 Master Detail Patterns

1 个答案: