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 Components是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}
])

现在要访问路由器链接，你会传递它：

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

现在回答你来回传递事物的问题。

对于你的第一个组件，你应该把它放在：

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

所以你很可能希望用方括号括起你的字符串，所以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']
  }
}

哪个应该遍历您的导航项目。

另一方面并不是因为我认为它有点愚蠢的关键字而且它仍然占据了我大约50％的时间，因此请确保在of之间使用ngFor #item of items。

在Angular2中创建链接组件

1 个答案: