1

私はAngular2にかなり慣れていないので、やろうとしていることに対する解決策を見つけていません。次の例で説明しようと思います。

子コンポーネントXまたはYを含むことができる親コンポーネントAがあるとします。これは、viewchild を使用して簡単に解決できます。

しかし、コードを複製せずに子コンポーネントを動的にロードしたい場合はどうでしょうか?

実際の例:

  • コンポーネント U : コンポーネント A を呼び出し、ユーザーの選択に従って子コンポーネント (X または Y) を注入する、ユーザーによって呼び出されるコンポーネント。
  • コンポーネント A : テーブル、パネルなどのグリッド コンテナー。
  • コンポーネント X : サービス S1 の行を含むビュー
  • コンポーネント Y : サービス S2 の行を含むビュー

目的は、コンテナを簡単に変更して、すべてのビューを自動的に変更することです。

それを行う方法があるに違いありません。そのようなニーズに対する適切でクリーンなソリューションを見つけることができません。どんな助けでも大歓迎です。

ありがとう

4

1 に答える 1

0

Angular2 Component Routerを次のように使用できます。

(注: 簡単にするために、入力要素を追加せず、代わりに要素を使用しaました。同じ手順が適用されますが、関数を呼び出して、ロードされたコンポーネントを に挿入するようルーターに指示します<router-outlet>)

app.component.ts

import { Component }       from '@angular/core';
import { Router }       from '@angular/router';

@Component({
    selector: 'my-app',
    template: `
        <div>
            <!-- to show how the function can be called -->
            <a href="#" (click)="load('/page1')">Page 1</a>

            <!-- Right way with links -->
            <a href="#" routerLink="/page1">Page 1</a>

            <router-outlet></router-outlet>
        </div>
    `
})
export class AppComponent {
    constructor(private router: Router)

    load(path: string): void {
        this.router.navigate([path]);
    }
}

app.routing.ts

import { ModuleWithProviders }   from '@angular/core';
import { Routes, RouterModule }  from '@angular/router';

const appRoutes: Routes = [
    {
        path: "page1",
        component: "PageOneComponent"
    }
];

export const appRoutingProviders: any[] = [

];

export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes);

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { appRouting, appRoutingProviders }  from './app.routing';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        appRouting,
    ],
    declarations: [
        RootComponent,
    ],
    providers: [
        appRoutingProviders
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

乾杯！

于 2016-09-29T14:13:44.570 に答える