标签: angular2-routing

是否可以在 Angular 2 RC5 路由器的 CanDeactivate 防护中获得预期的路线？我看到了一个关于 CanActivate ( CanActivate )的类似问题的答案，但这在 CanDeactivate 守卫中似乎不起作用。

我的用例如下：用户在填写由“FormComponent”服务的表单的过程中单击“主页”链接。FormComponent 有一个 CanDeactivate 附加到它。我需要知道用户正试图专门转到“主页”路线来决定我想在 CanDeactivate 中做什么。检查 CanDeactivate 守卫中的 ActivatedRouteSnapshot 和 RouterStateSnapshot 对象仅显示有关用户当前所在路径的信息，与 FormComponent 相关。虽然我理解这将两个组件耦合在一起，但这只是一个示例，以了解这是否可行。

我正在使用 Angular 2.0 稳定版本，并希望用户在离开页面之前进行确认（他们的更改不会被保存）。

问题是，如果用户希望访问延迟加载的页面，则实现的“CanDeactivate”防护会被调用两次。（使用哈希位置策略）

重现步骤：

1. 下载并设置https://github.com/iurii-kyrylenko/angular2-webpack
2. 设置可以停用防护

应用程序路由.ts

{ path: 'task1', component: Task1Component, canDeactivate: ['candeactivate'] },

应用程序/task-1/task1.module.ts

@NgModule({
    imports: [CommonModule],
    declarations: [Task1Component],
    exports: [Task1Component],
    providers: [
        {
            provide: 'candeactivate',
            useValue: () => {
                console.log("can deactivate");
                return confirm("Test");
            }
        }
    ]
})
export class Task1Module {}

3. 从“localhost:8080/#/task1”开始
4. 手动将 url 更改为“localhost:8080/#/task2”

请注意，系统会要求您两次确认。我找到了https://github.com/angular/angular/issues/11754，但目前没有任何解决方案。

有什么解决方法吗？

我正在尝试做类似的事情

<router-outlet name='chart.id'></router-outlet>

其中chart.id 类似于“id1、id2、id3”等。我想在运行时生成这些，因为我不知道我将拥有多少个 id。

我希望最终结果像

<router-outlet name='id1'></router-outlet>
<router-outlet name='id2'></router-outlet>
<router-outlet name='id3'></router-outlet>

谢谢！

在我的 ng2 应用程序中，我有以下路线：

const modalRoutes: Routes = [{
    path: 'modal_1',
    component: SomeModalComponent,
    outlet: 'modal',
    children: [
        {
            path: 'step_one',
            component: OneSubmodalComponent,
            outlet: 'submodal'
        },
        {
            path: 'step_two',
            component: AnotherSubmodalComponent,
            outlet: 'submodal'
        },
        {
            path: '',
            redirectTo: 'step_one',
            outlet: 'submodal',
            pathMatch: 'full'
        }
    ]
}];

我有一个用于主页内容的未命名的路由器出口，该路由描述了一个模式的路由，该模式被路由到一个命名的出口modal，并且本身包含一个命名的出口submodal。

从 Angular 2.2.4 开始，这工作得很好，但更新到 2.3.0+ 后，我现在收到错误Invalid configuration of route 'modal_1/': a componentless route cannot have a named outlet set。我可以看到这是因为重定向路由没有定义组件，但它应该只是重定向到step_one已定义的组件。我这里的路由设计有问题吗？

我想要做的是，我想同时加载home component和sidebar component。

const appRoutes: Routes = [
  {
    path: '', component: HomeComponent, children: [{
      path: 'sidebar', component: SidebarComponent, children: [
        { path: 'about', component: AboutComponent },
        { path: 'clients', component: ClientsComponent },
        { path: 'services', component: ServicesComponent },
        { path: 'contact', component: ContactComponent },
        { path: 'datatable', component: DataComponent }
      ]
    }]
  }

我需要在 ngx-admin nebular 和 angular 5 中的路由选项卡集组件中添加一个参数，如下所示：

tabs: any[] = [
    {
      title: 'My tab 1',
      route: '/pages/projects/edit/tab1/:id',
    }...
]

有没有办法做到这一点？

提前致谢

我有一个从 ActivatedRoute 的 params 属性获取值的组件。

组件看起来像：

......
  constructor(public userRegistration: UserRegistrationService, public userLogin: UserLoginService,
              public router: Router, public route: ActivatedRoute) {
  }

  ngOnInit() {
    this.verificationCode = new FormControl('', [Validators.required]);
    this.confirmationCodeForm = new FormGroup({verificationCode: this.verificationCode});

    //****************************** 
    this.sub = this.route.params.subscribe(params => {
      this.email = params['userId'];
    });
   //******************************
    this.errorMessage = null;
  }
 ......

该测试提供了一个 ActivatedRoute 作为模拟该类的“useValue”。测试看起来像：

describe('ConfirmRegistrationComponent', () => {
  let component: ConfirmRegistrationComponent;
  let fixture: ComponentFixture<ConfirmRegistrationComponent>;
  let userRegistrationService: UserRegistrationService;
  let userLoginService: UserLoginService;
  let router: Router;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ReactiveFormsModule, FormsModule, RouterTestingModule, HttpClientModule], …

我有以下路由应该路由到同一个组件，我可以通过使用以下结构来让它工作。

const carModuleRoutes: Routes = [
    { path: 'car/:category/:carId', component: CarDetailComponent},
    { path: 'car/:carId', component: CarDetailComponent},
];

但我知道这不是这样做的标准方法，是否有执行相同功能的正确方法？

我已按照官方migating_documentation中提到的相同步骤进行操作我遵循了Angular

不幸的是，当我将代码从 Angular 2 迁移到 Angular 4.4 时，我遇到了一个问题。该问题可能与@angular/router有关。

然而，代码似乎工作正常，但我无法进行构建。任何建议将不胜感激。

终端中显示错误：

ERROR in [at-loader] src/app/app.component.ts:60:16 
TS2339: Property 'url' does not exist on type 'Event'.
Property 'url' does not exist on type 'RouteConfigLoadStart'

ERROR in [at-loader] src/app/app.component.ts:60:39 
TS2339: Property 'url' does not exist on type 'Event'.
Property 'url' does not exist on type 'RouteConfigLoadStart'.

ERROR in [at-loader] src/app/app.component.ts:60:68 
TS2339: Property 'url' does not exist on type 'Event'.
Property 'url' does not exist on type 'RouteConfigLoadStart'.

包.json

ERROR in [at-loader] src/app/app.component.ts:60:16 …

我遇到了 Angular 的情况，其中路由数据解析器似乎准备正确返回数据，但解析从未发生。这特别奇怪，因为我有另一个组件的平行排列，并且在那里工作正常。

该应用程序通过 HTTP 检索有关一系列事件的数据。在 中EventListComponent，解析器返回所有事件以响应/events，并且组件正确显示它们。在一个EventDetails组件中，在我目前的安排中，我仍然通过 HTTP 检索所有事件，然后在解析器中响应/events/[the event ID]，选择应该显示其详细信息的事件。（这是来自 Pluralsight Angular Fundamentals 课程，以防它听起来很熟悉。但我倾向于观看视频，然后按照我自己的顺序完成它们，以尝试巩固我头脑中的技能。）

远程事件.service.ts

import { Injectable, EventEmitter } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { IEvent } from './event.model';

@Injectable()
export class RemoteEventService {

  constructor(
    private http: HttpClient
  ) {}

  getEvents(): Observable<IEvent[]> {
    return this.http.get<IEvent[]>('/api/ngfdata/events.json');
  }

  getEventById(id: number): Observable<IEvent> {
    console.log(`In getEventById: id = ${id}`);
    const emitter = new EventEmitter<IEvent>(); …