在Angular2中創建鏈接組件

Question

希望在Angular 2中創建包裝器組件，類似於react-bootstrap和其他工具允許您創建包裝器組件的方式。 希望能夠重用該組件，因此我們不必每次都重復該結構。

本質上，我希望能夠重用具有這種粗略結構的組件：

'use strict';
import { ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';
import {Component, Input} from 'angular2/core';

@Component({
  selector: 'nav-item',
  directives: [ROUTER_DIRECTIVES],
  providers: [ROUTER_PROVIDERS],
  template: `
  <li>
     <a routerLink="<SPECIFIED ROUTE>">
      <ng-content></ng-content>
    </a>
  </li>
  `,
})

export default class NavLink {
  public static $injector: Array<string> = [];
  @Input() to: string;
  constructor() {}
}

接着

'use strict';

import {Component} from 'angular2/core';
import NavLink from './link.component';

@Component({
  selector: 'Navbar',
  host: {'class': 'navbar'},
  directives: [NavLink],
  template: `
    <div class="row">
      <ul>
        <nav-item to="/Foo">
        </nav-item>
      </ul>
    </div>
  `,
})

export default class Nav {
  constructor() {}
}

我知道routerLink期望使用數組規范，但是我想知道將數據從父組件傳遞到子組件然后在子組件中訪問該數據的angular2方法是什么。 我知道@Input裝飾器可以讓您指定要傳入的屬性，然后可以使用父組件中的[]綁定到該屬性，但是我不確定組件中的最佳訪問方法:)

我試過了：

<a routerLink="{{ to }}">

但是angular2抱怨無法.forEach超出預期的數組規范（這很有意義）。

EXCEPTION: TypeError: linkParams.forEach is not a function in [{{ to }} in NavLink@2:8]

我只是不確定將數據傳遞到綁定屬性的方式。 我來自React的更多背景，所以事情都是通過props傳遞的，您可以檢查類型，這幾乎只是普通的JavaScript對象傳遞。

訪問綁定屬性的最佳方式是什么，並且/或者這是我要實現的反模式？

Answer 1

我認為Angular2組件是React組件的更強大的版本，您可以花更少的錢做更多的事情。 我不確定這是好是壞，但是只是知道您可能不需要抽象那么多的東西，或者想要像在React中那樣抽象那么多的東西。 這是因為有更多的預構建工具，這些工具可能又使您執行某些操作的自由度降低，並使其更快地執行其他操作。

我還要說，至少對我而言，在React中來回傳遞值更加直觀。

因此，在這里繼續介紹正確的語法以及路由在Angular2中的工作方式。 盡管您可能已經知道了這一點，但無論如何我都會將其發布，以防其他人閱讀。

您將從一個@RouteConfig裝飾器開始，該裝飾器接受一組對象並將其提供給您的應用程序。 因此，您的情況如下：

@RouteConfig([
    {path: '/wine', name: 'Wine', component: Wine},
    //or just so you can see it in case you haven't how to add params!
    {path: '/wine/:type', name: 'WineType', component: WineType}
])

現在要訪問routerlink，您將通過它：

<a [routerLink] = "['/Wine'] </a>
<a [routerLink] = "['/WineType', {type: type.ID}]}> </a>

現在回答您的來回傳遞問題。

對於第一個組件，應輸入以下內容：

  <li>
     <a routerLink="[to]">
      <ng-content></ng-content>
    </a>
  </li>

因此，您很可能希望將to字符串括在方括號中，以便語法對於routerLink而言是正確的。

對於第二個組件Navbar，語法相當接近，但不完全精確。

   <div class="row">
      <ul>
        <nav-item [to]="/Wines"></nav-item>
      </ul>
    </div>

這表示將“ / Wines”傳遞到子組件中的變量[to]。 它必須放在方括號中。

並添加導航欄項目列表，您可以執行以下操作：

'use strict';

import {Component} from 'angular2/core';
import NavLink from './link.component';

@Component({
  selector: 'Navbar',
  host: {'class': 'navbar'},
  directives: [NavLink],
  template: `
    <div class="row">
      <ul>
        <nav-item *ngFor="#item of items [to]=item>
        </nav-item>
      </ul>
    </div>
  `,
})

export default class Nav {
  all_my_routes: Array<string> = [];
  constructor() {
    all_my_routes = ['/Wine', '/OtherWine', '/Beer']
  }
}

哪個應該遍歷您的Nav項目。

另外一個側面並不是因為我認為這是一個有點愚蠢的關鍵字，它仍然讓我的時間約50％，為確保您使用of你之間ngFor #item of items 。