2017-03-17 46 views
1

私は一般的にAngularにはかなり新しいです。私のアプリケーションには、ヘッダーやページの一般的なレイアウトなど、すべてのものを共有する複数の「ページ(コンポーネント)」があります。各コンポーネントで繰り返されるのではなくcssとhtmlを共有できますが、それをどうやってやるかわからない。ここで私は何をしたいか、本質的である:2つの子Angular2コンポーネント間で親HTMLを共有するにはどうすればよいですか?

<parentPage> 
    <childPage1></childPage1> 
</parentPage> 

<parentPage> 
    <otherChildPage></otherChildPage> 
</parentPage> 

誰もが正しい方向に私を指すことができますか? "childPage1"と "otherChildPage"コンポーネントは全く異なっています。 1つにはたくさんのリンクがあり、もう1つはフォーマットされたテキストの壁です。しかし、これらのコンポーネントの外のページの全体的なレイアウトは、2つのコンポーネントのまったく同じです。

+0

私は、それぞれのコンポーネントにインポートされたスタイルシートを1つ持っていると思います。しかし、それは共有htmlの問題を解決しません。 –

答えて

0

角は、 "シングルページアプリケーション"フレームワークです。角度のユーザがログインするにはこの方法をlogin-componentを削除し、profile-component

<html> 
    <body> 
    <header-component/> 
    <profile-component/> 
    </body> 
</html> 

でそれを置き換えるときに

<html> 
    <body> 
    <header-component/> 
    <login-component/> 
    </body> 
</html> 

:あなたはログインページを持っていた場合、あなたのコードは次のようになります。例えば あなたは1ページしか持っていないので、必要に応じてコンポーネントを交換することができます。私はこれを達成する方法を説明する角度(2?)チュートリアルに従うことをお勧めします。この構造は意味

<parentPage> 
    <container> 
     <childPage1></childPage1> 
     <otherChildPage></otherChildPage> 
    </container> 
</parentPage> 

parentPageを行います

0

基本的にはSPAのウェブサイトです。アプリケーションが共通のUIルックアップを持つ場合は、 sol 1:ルートindex.htmlでルックアップのマスターピースを持ち、ルートコンポーネントと子コンポーネントがフォローアップします sol 2:親コンポーネントとして共通の共有HTMLを持っている2つの小さなコンポーネントとしてあなたの子供。合計3つのコンポーネントがあります。 sol 3:このアプローチは、UIルーティングで簡単に簡単に達成できます。Googleから読んで理解してください。

0

希望 - あなたの一般的なレイアウト

コンテナを持つことができます - あなたの子コンポーネントを持つことができます(これは、容器の中に行われる正しい子コンポーネントを選ぶことができどこあなたがレンダリングしたい子コンポーネントを選ぶために* ngIfを使うことができるコンポーネントのそれぞれのhtmlファイル

関連する問題