1

コンポーネントルーターを使用して角度のあるアプリケーションを構築したいと考えています。このアプリケーションは、2 つの異なるレイアウトで構成されています。1 つはログイン画面で、2 つのフィールド (ボタンのみ) があります。もう 1 つは、ヘッダー、サイドバー、およびコンテンツを含むメイン レイアウトです。ルートによって内容エリアが変わります。

これが私のコンポーネントツリーです: コンポーネントツリー

ここにもplnkrがあります：リンク

これは、ログインとメインのルートを定義する方法です。

/* main.js */
$routeConfig: [
   {path: '/login', name: 'Login', component: 'login'},
   {path: '/...', name: 'Main', component: 'main', useAsDefault: true}
]

現在、私が現在使用しているアプローチには 2 つの大きな問題があります。

まず、メイン コンポーネント内のすべてのリンクは、ng-link を使用するときに二重スラッシュで解決されます。これは、一部のブラウザで問題が発生する可能性があると思います。

/*this is what i get*/ 
//crisis-center 

/* this is how it should look like*/
/crisis-center

次に、私のナビゲーション コンポーネントはルート コンポーネントではなく別のコンポーネントであるため、$route にアクセスできません。したがって、$rootRouter を注入する必要があります。isRouteActive 関数を使用すると、常に true が返されます。これは、すべてのナビゲーション リンクがアクティブなクラスを取得することを意味します。

/* main.js */
this.routeIsActive = function (routerLink) {
    /* always returns true */
    return $rootRouter.isRouteActive($rootRouter.generate(routerLink));
}
4

0 に答える 0