質問: Angular2での開発に備えて、先行開発のソースをトレースして勉強中です。 その中で不明なコードがあったので理解の助けをいただきたく質問します。 @Componentのselectorに指定される値はhtmlタグであり、html中のその部分をtemplate(もしくはtemplateUrl指定のhtmlファイル)で置換してくれるというのが大ざっぱな理解です。しかし、トレース中にselectorに指定されたタグがワークスペース(Eclipse neonを使用しています)を検索しても出てこないものがありました。 1. そもそもこのようなコードはありなのでしょうか? 2. 上記がYESの場合、selector指定のタグがどこにも見つからないコンポーネントはどのような意味を持つのでしょうか? 質問のコードは以下になります。 ``` @Component({ selector: 'app-menu', templateUrl: './menu.component.html', styleUrls: ['./menu.component.css'] }) export class MenuComponent implements OnInit { ・・・・ } ```
回答: > > html中のその部分をtemplate(もしくはtemplateUrl指定のhtmlファイル)で置換してくれるというのが大ざっぱな理解です。 > > > サンドボックスで取り込まれる(どういう風に言えばいいか...)ので、親子関係になるになると理解してます。 「ツリー構成」が一番しっくりくるかもしれません。 > > そもそもこのようなコードはありなのでしょうか? > > > selectorがないcomponentも存在します。 公式ドキュメントではrouter-outletあたりが見やすいかもしれません。 ↓のcompose-message.component.tsはcomponentですがselectorはありません。 ##### 蛇足 実行時のソースをみるとコンポーネントごとに「_ngcontent-c0.1.....n」と言うのが自動的に組み込まれ、コンポーネント間は独立しています。 普通のjs?なら親子関係と言う考えは無いのでidが分かればデータのやり取りができますが、angularの場合親子関係でデータを共有したい場合は@inputやserviceを使ったりします。