小编Tho*_*der的帖子

我知道我可以将参数传递routerLink给路由,例如

/user/:id

通过写作

[routerLink]="['/user', user.id]"

但是这个路线怎么样:

/user/:id/details

有没有办法设置此参数或我应该考虑不同的URL方案？

我们假设我得到了这个路由器配置

export const EmployeeRoutes = [
   { path: 'sales', component: SalesComponent },
   { path: 'contacts', component: ContactsComponent }
];

并已导航SalesComponent到此URL

/department/7/employees/45/sales

现在我想去contacts,但因为我没有绝对路线的所有参数(例如7上面例子中的部门ID ),我宁愿使用相对链接到达那里,例如

[routerLink]="['../contacts']"

要么

this.router.navigate('../contacts')

不幸的是,这不起作用.可能有一个明显的解决方案,但我没有看到它.有人可以帮帮忙吗？

我需要使用绑定将值数组传递给组件,例如

@Component({
    selector: 'my-component',
    template: '<div data="[1, 2, 'test']"></div>
})
export class MyComponent {
    @Input() data: any[];
    ...
}

但是,似乎Angular将其视为string/ string[1](在实际项目中,数组是一个路由,我需要将此路由传递给具有该[routerLink]指令的组件).

我该怎么做？

我刚刚遇到一个延迟加载模块的问题,其中父模块和子模块都需要相同的服务但​​每个都创建一个实例.声明对两者都是相同的,即

import { MyService } from './my.service';
...
@NgModule({
   ...
   providers: [
      MyService,
      ...
   ]
});

这是路由设置

export parentRoutes: Routes = [
   { path: ':id', component: ParentComponent, children: [
      { path: '', component: ParentDetailsComponent },
      { path: 'child', loadChildren: 'app/child.module#ChildModule' },
      ...
   ]}
];

当然,然后将其导入父模块中

RouterModule.forChild(parentRoutes)

如果我想共享相同的服务实例,我该怎么做呢？

在我的应用程序中,一些URL采用该表单

/department/:dep/employee/:emp/contacts

在我的侧边栏中,我显示了所有员工的列表,每个员工都有一个[routerLink]链接到该员工联系人的员工

<ul>
    <li>
        <a [routerLink]="['/department', 1, 'employee', 1, 'contacts']"></a>
    <li>
    <li>
        <a [routerLink]="['/department', 1, 'employee', 2, 'contacts']"></a>
    <li>
    ...
</ul>

然而,通过这种方法,我总是需要提供完整的路径,包括所有的参数(dep如上例所示),这非常麻烦.有没有办法提供路线的一部分,例如

<a [routerLink]="['employee', 2, 'contacts']"></a>

(没有那个department部分,因为我并不真正关心department那个观点,而我的感觉是,这反对分离了关注点)？

如何在不污染我的域模型的情况下在实体框架中保留值对象？EF(通常是关系数据库)要求我定义一个键 - 我的值对象没有开箱即用,例如

public class Tag : ValueObject<Tag>
{
   private readonly string name;

   public Tag(string name)
   {
      this.name = name;
   }

   public string Name { get { return this.name; }}
}

另一方面,我不应该解决模型中的持久性问题.我真的应该创建另一个类,其中包含值对象的所有字段加上一个键属性,然后将它们相互映射？我宁愿不.

是否有更优雅的解决方案？

我得到了这样的项目设置

project/
|
+---src/
|   |
|   +---app/
|       |
|       sample.ts
|
+---typings/
+---tsconfig.json

这是我的 tsconfig.json

{
    "compilerOptions": {
        "rootDir": "src",
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": true,
        "sourceMap": true,
        "noImplicitAny": false,
        "outDir": "dist"
    },
    "exclude": [
        "node_modules",
        "src/assets",
        "src/lib"
    ]
}

我想知道的是,为什么VSC会指出诸如此类的错误

当显然没有任何错误("experimentalDecorators": true被设置tsconfig.json),并且应用程序转换得很好？而且它不仅仅是装饰器,Promise而且还突出显示了(我确保tsconfig.json在同一个文件夹中typings,我得到了es6-shim安装的打字).

不确定是否重要,但我现在正在typescript@2.0.0-dev.20160707.

我正在玩Angular 2 RC5,并遇到了以下问题:

"错误:类型WelcomeComponent是2个模块声明的一部分:WelcomeModule和AppModule!

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { Routes, RouterModule }  from '@angular/router';
import { WelcomeModule } from './welcome/welcome.module';
import { AppComponent }  from './app.component';
import { 
    routing, 
    appRoutingProviders 
} from './app.routing';

@NgModule({
  imports:      [ 
  BrowserModule, 
  RouterModule, 
  WelcomeModule,
  routing
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ appRoutingProviders ]
})
export class AppModule { }

app.routing.ts

import { 
    Routes,
    RouterModule 
} from '@angular/router';

import { welcomeRoutes …

我切换MdTabGroup到md-tab-nav-bar/ md-tab-link指令,以便能够将路由分配给各个标签页.不幸的是,我在这个过程中丢失了滑入式动画(似乎没有指令的动画),所以我试图模仿行为MdTab到目前为止没有成功.

这是使用tab指令的模板:

<div class="ink-results" *ngIf="model && (model | async).length > 0" >
    <nav md-tab-nav-bar>
        <a md-tab-link
            *ngFor="let browser of model | async;trackBy: trackByBrowserId"
            [routerLink]="['/results', browser.id]"
            routerLinkActive #rla="routerLinkActive"
            [active]="rla.isActive">
            {{browser.name}}
        </a>
    </nav>
    <router-outlet></router-outlet>
</div>

这是路由到的模板:

<div class="ink-explorer">
    <div class="ink-items">
        <div class="ink-item"
            [@flyInOut]="state"
            *ngFor="let result of results | async;trackBy: trackById"
            routerLinkActive="ink-active-item">
            <a [routerLink]="[result.id]">
                <md-icon svgIcon="flask" 
                    [ngClass]="{ 'ink-failed': (result.status === 2), 'ink-pending': result.status === 4, 'ink-success': result.status === 6 }">
                </md-icon>
                <div class="ink-item-title">{{result.description}}</div>
            </a>
        </div> …

升级到Angular 2 RC5(来自RC4)后,我似乎无法再注入ActivatedRoute我的组件.

原始例外:没有ActivatedRoute的提供商!

这是相关的代码:

import { Component } from '@angular/core';

import { 
  ActivatedRoute
} from '@angular/router';

declare var module: {
  id: string;
};

@Component({
  moduleId: module.id,
  selector: 'mds-app',
  templateUrl: 'app.component.html',
  styleUrls: [
      'app.component.css'
  ],
  directives: []
})
export class AppComponent { 

  constructor(private _route: ActivatedRoute) {
    this._route.params.subscribe(params => console.log(_route));
  }
}

这是我的app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule }  from '@angular/common';
import { Routes, RouterModule }  from …