标签: angular2-routing

我在将数据传递到 routerLink 时遇到一些问题。这是我想要做的：（这个输入在 ngFor 内部，当 id 达到 4 时我需要更改路由）

 <input type="button" class="btn-cards" [ngClass]="getStyle(negociacao)"  [routerLink]="['/{{negociacao.rota}}', negociacao.id]" value="{{negociacao.status}}">

我收到的错误如下：

得到插值 ({{}})，其中第 3 列应有表达式

提前致谢 ：）

按钮看起来像这样

<button [routerLink]="['/account/recovery','identification']" class="btn btn-default">Back</button>

我想检查/account/recovery/identification点击按钮后url 是否已重定向到

如果是锚标签解决方案这里提供。我的问题是按钮标签。

我的测试规范如下所示。

beforeEach(async(() => {
        let ne = new NavigationEnd(0, "/account/recovery/otp", null);       // Create a mock instance for navigation end, utilized within OnInit()
        router = {
            navigate: jasmine.createSpy('navigate'),    // to spy on the url that has been routed
            events: new Observable(observer => {        // last router event that occurred
                observer.next(ne);
            }),

        };
        TestBed
            .configureTestingModule({
                imports: [CoreModule],
                declarations: [OtpComponent],
                providers: [
                    {provide: Router, useValue: router},
                    {provide: ActivatedRoute, useValue: router},
                    {provide: …

我在我的示例中嵌套了导航（路线）

<ul>
    <li *ngFor="let route of routes" [routerLink]="route.link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
        {{route.name}}</span>
        <!-- Secondary navigation (if exists) -->
        <ul *ngIf="route.children" class="secondary">
          <li *ngFor="let item of route.children" [routerLink]="item.link" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
            {{item.name}}
          </li>
        </ul>
    </li>
</ul>

每次我单击父项时，它都会导航到适当的链接，但是在单击任何子项时，它会导航到父 <li> 路由，而不是相应的子链接，因为整个子项 <ul> 是该父项的一部分<li> 在这种嵌套情况下，如何阻止此父 routerLink？感谢您的帮助。

我有 canActivate 守卫，它位于所有路线上（在父路线上）。当我第一次访问任何链接时它可以正常工作，但是当我更改路线时它不起作用。Guard 是关于登录用户的（如果 api 返回我已登录，则返回 true，否则我将其重定向到登录页面）我应该做什么？谢谢

我想重写 Router::navigate 并直接在 Router 类中执行一些代码（例如日志）

export const routes: Routes = [
    {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
    }
];


export function routerFactory(rootComponentType: Type<any> | null, urlSerializer: UrlSerializer,
                   rootContexts: ChildrenOutletContexts, location: Location,
                   injector: Injector, loader: NgModuleFactoryLoader,
                   compiler: Compiler, config: Router): Router {

  return new MyRouter(
      rootComponentType,
      urlSerializer,
      rootContexts,
      location,
      injector,
      loader,
      compiler,
      config
  );
}


@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    routing,
    ...
  ],
  providers: [
    ...
    {
      provide: Router,
      useFactory: routerFactory,
      deps: [Type, UrlSerializer, ChildrenOutletContexts, Location, Injector, …

我有带有 Nodejs 后端（REST API）的角度应用程序。我对 S3 和 EC2 感到困惑。哪一个更好，部署到每个的优缺点是什么。考虑平均负载。我们将非常感谢您的帮助。

我已经设置了一个plnkr来演示我想要问的问题

我在网络应用程序中有一些组件,

父组件, App

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div class="main-container">
      <h2>This is the base. This div must be seen on app pages</h2>
      <a [routerLink]="['Home']"> Home </a> | 
      <a [routerLink]="['Users']"> Users  </a> | 
      <a [routerLink]="['Contact']"> Contact </a>
    </div>

    <router-outlet></router-outlet>
  `,
  directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
  {
    path: '/',
    name: 'Home',
    component: HomeComponent,
    useAsDefault: true

  },
  {
    path: '/users/...',
    name: 'Users',
    component: UsersComponent
  },
  {
    path: '/contact',
    name: 'Contact',
    component: ContactComponent
  }
])
export class App {

} …

我的html调用此组件

   <navbar [title]="'Recorridos'"
            [hasNavbarItems]="true"
            [itemsJsonFileName]="'recorrido-list-navbar-items.json'"
            (btnActionClicked)="onBtnActionClicked($event)"
            (btnFilterClicked)="onBtnFilterClicked($event)">
    </navbar>

这是一个动态组件,然后在onBtnActionClicked($ event)需要重定向

<a [routerLink]="['/parent/detail', detail.detailId]">{{detail.detailId}}</a>

但正如你所看到的那样无法从html中添加,那么在我的组件中我可以调用按钮单击执行

onBtnActionClickedV(event) {

        }

在该函数中,我如何像routerLink一样重定向？

我看到了两种将简单数据（例如字符串）从路由路径传递到不同组件的方法：

第一种方式：

路由方：

export const AppRoutes: Routes = [
  ...
  { 
    path: '/one', component: OneComponent, resolve: { foo: 'foo' }
  }
];

组件侧：

@Component()
export class OneComponent implements OnInit {
    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.foo = this.route.snapshot.data['foo'];
    }
}

第二种方式：

路由方：

const routes: RouterConfig = [
    ...
    {
      path: '/one', component: OneComponent, data : {some_data : 'some value'}
    }
];

组件侧：

@Component()
export class OneComponent implements OnInit {
    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.obs = this.route
          .data …

我有一个Angular 4应用程序和我private.component.html这样的东西:

<app-breadcrumb></app-breadcrumb>
<router-outlet></router-outlet>

我的路由:

const privateRoutes: Routes = [
    {
        path: '',
        component: PrivateComponent,
        children: [
            {
                path: 'dashboard',
                component: DashboardComponent
            },
            {
                path: 'settings',
                component: SettingsComponent
            },
            {
                path: 'companies',
                component: CompaniesComponent,
                children: [
                    {
                        path: 'add',
                        component: FormCompanyComponent
                    },
                    {
                        path: ':id',
                        component: CompanyComponent
                    }
                ]
            }
        ]
    }
];

在第一级的所有组件在渲染路由器出口的PrivateComponent.但我想(如果可能的话)所有其他孩子(我可以有多个级别),喜欢/companies/add或/companies/20仍然在我的私人模板的同一路由器插座中呈现.我的实际代码,当然,我希望我有一个插座companies.component.html.

这对于实现我的面包屑组件并编写"主页>公司> Apple Inc."非常重要., 例如. …