2

次の問題があります。

サイドバーには私のメニューがあり、ボタン kag をクリックすると、コンポーネント ヘッダーの 3 つの新しいボタンが読み込まれます (写真を参照)。

どのように実装できるかわかりません:( ヒントや例を教えてもらえますか?これはイベントバインディングで行われていることはわかっていますが、別のコンポーネントでクリックしてコンテンツを使用する方法はまだわかりません..

よろしくアンドレアス

これが私のダッシュボードです

4

3 に答える 3

3

問題を解決するために利用できるオプションがいくつかあります。ここで提供するソリューションでは、右メニューとヘッド メニューの両方がルート コンポーネントに配置されていると想定しています。

私がすることは、ルートにリンクされるリゾルバーを使用することです。このリゾルバはメニューを更新します。これは、メニューが ngrx を使用してサービスまたはアプリの状態に保存されていることを意味します。ngrx のことはしばらく忘れて、単純な angular サービスを使用していると仮定します。

メニュー項目の設定をサービス内に保存することで、そのコントロールを他のコンポーネントから完全に切り離しました。これにより、動作の単体テストが容易になります。また、すでに実装されている動作を変更せずにメニューを別の方法で構成できるため、柔軟性も提供します。

推奨される実装を次に示します。私はそれをテストしていませんが、開始パスを提供する可能性があります。

サービスはこちら

export type MenuItems = MenuItem[];

export interface MenuItem {
    label: string;
}

@Injectable()
export class MenuItemsService {

     private $menuItems = new BehaviorSubject([]);

     set menuItems(menuItems: MenuItems){
         this.$menuItems.next(menuItems);
     }

     get menuItemsChanges() {
         return this.$menuItems;
     }
}

ここにリゾルバーがあります。実行するために、ルートにリンクすることを忘れないでください。もちろん、リゾルバー以外の場所から実行したい場合はMenuItemsService、同じ方法で呼び出すことができます。

@Injectable()
export class KAGDetailsResolve implements Resolve<MenuItems[]> {

    menuItems: MenuItems = [
        {
            label: 'My first button'
        },
        {
            label: 'My second button'
        },
    ];

    constructor(private menuItemService: MenuItemsService) {}

    resolve(route: ActivatedRouteSnapshot) {

        this.menuItemService.menuItems = this.menuItems;

        return this.menuItems; // we return it as it is mandatory but that's actually not used in this example
    }
}

そして、動的メニューの表示を担当するコンポーネントは次のとおりです。

// the  component which will render your menu
@Component({
    selector: 'my-dynamic-menu',
    template: `<ul>
                <li *ngFor="menuItem in menuItems | async"> {{ menuItem.label }}</li>
               </ul>`
})
export class MyDynamicMenuComponent implements OnInit{

    $menuItems: Observable<MenuItems>;

    constructor(private menuItemService: MenuItemsService) {}

    ngOnInit(): void {
        this.$menuItems = this.menuItemService.menuItemsChanges;
    }
}

ご覧のとおり、依存していObservableます。さらに、MenuItemクラスは非常に貧弱ですが、アイテムのより多くのプロパティを記述することができます (色、CSS クラス、クリック時にトリガーする関数、任意の URL など)。

于 2018-01-06T12:00:55.377 に答える
0

ショートカット コンポーネントを作成できます。それはどのように機能しますか？

  • menu-component から、選択されたメニューのリストを取得します
  • ユーザー (クリック) が共有 BehaviorSubject/Observable で更新を送信すると、メイン サービスに追加できます
  • コンストラクターでこのサービスを各コンポーネントに追加します


// in both component
constructor(private mainService: MainService) {}
// on click on your li or a
mainService.shortcut.next(['menu1')); 



// in your menu component, onInit : 

this.mainService.shortcut.subscribe((shortcut) => {
   if(shortcut) { this.shortcutList.push(shortcut); }
};
于 2018-01-06T11:31:48.880 に答える