角度UIルータ - コンポーネント - 親 - 子 - 入れ子 - 表示されないロード

Question

私はui-routerとコンポーネントに関する質問をしました。私は非コンポーネントベースの構造からコンポーネントベースの構造に切り替えました。 私はそれを気に入っています。リソースの管理や処理が非常に明確で非常に簡単です。 私のアプリは非常に、非常に複雑であり、このようなモジュールやコンポーネントの多くの層を持っている：

app.Layoutで

アプリ

- Layout 
- LogicCode 

モジュール

- Layout 
- LogicCode 
- Config/Routing 

Components 
    ComponentA 
     - Layout 
     - LogicCode 
     - Config/Routing 

    ComponentB 
     - Layout 
     - LogicCode 
     - Config/Routing 

は

<div ui-view="module" /> 

です

要素

module.Layoutに

<div ui-view="moduleContent" /> 

素子

はmodule.Configモジュール、例えば穴のルーティングを行います

$stateProvider 
.state({ 
    // abstract: true, 
    name: 'my_module', 
    url: '/my_module', 
    views: { 
     'module': { component: 'my_module' } 
    } 
}); 

component.Config各コンポーネントなどのルーティングを取り：

$stateProvider 
// This is a list view e.g. for orders or something like that 
.state({ 
    name: 'my_module.componentA', 
    url: '/componentA', 
    resolve: { 
     //... 
    }, 
    views: { 
     'moduleContent': { component: 'componentAList' } 
    } 
}) 
// this should be the detail view (abstract cause it has many sub components) 
.state({ 
    name: 'my_module.componentA.item', 
    url: '/:itemId', 
    views: { 
     'moduleContent': { component: 'componentAItem' } 
    }, 
    resolve: { 
     // ... 
    }, 
    abstract: true, 
    redirectTo: 'my_module.componentA.item.general' 
}) 
// this is the major item view 
.state({ 
    name: 'my_module.componentA.item.general', 
    url: '/', 
    component: 'componentAItemGeneral' 
}) 
// this is any other item view 
.state({ 
    name: 'my_module.componentA.item.positions', 
    url: '/', 
    resolve: { 
     // ... 
    }, 
    component: 'componentAItemPositions' 
}); 

私が状態 "my_module"をリンク状態 "my_module.componentA"がすべて正常に動作するときにも、ヒンジは正常に動作します。 しかし、 "my_module.componentA.item"をリンクしようとすると、ビューは変更されず、コンポーネントのコントローラは正常に動作しますが、 ビューは変更されません。私は "my_module.componentA.item.general"または "my_module.componentA.item.positions"をリンクするときと同じです。 どこに問題がありますか？私の目を開くことができます - ありがとう！

Answer 1

がうまくいけば、あなたはすでに今ではこれを解決してきましたが、念の誰かが、

あなたはそれがセットアップされている方法... 'my_module.componentA.item'をしようとしているあなたの状態をこれにつまずくと、ここで何が起こったのか知りたいですcomponentAListのhtmlの中に<div ui-view="moduleContent"></div>があるかどうか調べてください。現在、その親の中の名前付きビューを指しているからです。それを実行したい場合は、そのビューをそのコンポーネントのテンプレートに追加するだけです。

my_moduleの中に<div ui-view="moduleContent"></div>が含まれているように見えるように思われます。そのためには、これはむしろ祖父母のHTMLでその名前のビューを探すためにそれを教えてくれます

views: { 
    'moduleContent@^.^': { component: 'componentAItem' } 
}, 

または

views: { 
    'moduleContent@my_module': { component: 'componentAItem' } 
}, 

に状態'my_module.componentA.item'のためにあなたの状態の宣言でviewsプロパティを変更親よりも。