web-dev-qa-db-ja.com

<router-outlet>で@Inputsを使用するAngular2

共通のメインビューの下にいくつかのサブビューを表示するサブナビゲーションがページにあります。 <router-outlet>を介してサブビューにオブジェクトを渡し、メインコンポーネントでデータを1回取得して、サブコンポーネントと共有できるようにします。

注：ディレクティブ<one></one>をmain.htmlに含めると機能しますが、これは望ましい動作ではありません。

メインビュー：

<h1>Details</h1>   
<a [router-link]="['./sub1']">One</a> | 
<a [router-link]="['./sub2']">Two</a> | 
<a [router-link]="['./sub3']">Three</a>   
<hr/>  
<router-outlet [data]="maindata"></router-outlet>

サブビュー1：

<h2>{{ data.name }}</h2>
...

メインビュー：

@Component({
    selector: 'main-detail',
    directives: [ROUTER_DIRECTIVES],
    templateUrl: './main.html'
})
@RouteConfig([
    { path: '/', redirectTo: '/one' },
    { path: '/one', as: 'One', component: OneComponent },
    { path: '/two', as: 'Two', component: TwoComponent },
    { path: '/three', as: 'Three', component: ThreeComponent }
])
export class MainComponent {
    maindata: Object = {name:'jim'};
}

サブビュー1：

@Component({
    selector: 'one',
    directives: [CORE_DIRECTIVES],
    inputs: ['data'],
    templateUrl: './one.html'
})
export class OneComponent {
    @Input() data;
}
typescriptangularangular2-template
40
JRulle

単純なデータの場合は、 RouteParams を介して渡すことができます

<a [router-link]="['./sub3'],{name:'jim'}">Three</a>

次に、サブビューで

@Component({
    selector: 'one',
    directives: [CORE_DIRECTIVES],
    templateUrl: './one.html'
})
export class OneComponent {
    data: any;
  constructor(params: RouteParams){
    this.data = params.get('data');
  }
}

RouterConfigをコンポーネント内で移動することにより、コンポーネントから常にパラメーターを渡すようにルートを設定することもできます（注意、これは通常の方法ではありません）：

export class AppCmp {
  history: string[] = [];
  constructor(public list: PersonalizationList,
              private router_: Router) {
    list.get('histoy', (response) => {
      this.history = response;
    });
    router_.config([
      { path: '/', component: HomeCmp, as: 'Home', data: this.history },
      { path: '/about', component: AboutCmp, as: 'About' }
    ]);
  }
}

ソースへのクレジット

もっと複雑なことをするつもりなら、ルート/コンポーネント間の通信にサービスを使用することをお勧めします。それは実際に私が好む方法です。

サンプルサービス：

import {Injectable} from 'angular2/angular2';

@Injectable()
export class CarsService {
  list1: array<any> = ['a','b','c','d'];
  list2: array<any>;

  constructor() {
    this.list2 = [1,2,3,9,11];
  }
}

サービスの注入方法：

export class Cars {
  constructor(cars:CarsService) {
    this.cmpList1 = cars.list1;
    this.cmpList2 = cars.list2;
  }
}

この方法では、親/子またはその他の奇妙な制限に関係なく、サービスを使用して通信できます。

14
Dennis Smolek

構文が変更されたようです。以下は私のために働く〜Angular4.0.0

HTML（Pass Route Parameters）

<li><a [routerLink]="['/templatecreate',{mode:'New'}]">New Job</a></li>

コンポーネント

constructor(private route: ActivatedRoute) { }

ngOnInit() {       
  this.getTemplate();

  this.sub = this.route.params.subscribe(params => { this.id = params['mode'];
  console.log("Routing Mode", this.id);    
  });
}
13
Tanmay

データを渡すための適切なAngular2の方法は、（サービスを使用して）依存性注入を介したものであると思います。

また、サービスを使用すると、「懸念の分離」が可能になります。つまり、コンポーネントAはコンポーネントBに依存してはなりません。

依存性注入リンク：

1） https://angular.io/guide/dependency-injection

2） https://angular.io/guide/dependency-injection-in-action

3） https://www.youtube.com/watch?v=MJrw43GP2

0
Gene