相关疑难解决方法(0)

我试图从url获取startdate.网址看起来像http:// sitename/booking？startdate = 28-08-2017 下面是我的代码

aap.module.ts

    import {...};

    @NgModule({
      declarations: [
        AppComponent, ModalComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        ReactiveFormsModule,
        RouterModule.forRoot([{
                path: '',
                component: AppComponent
            },
        ]),    
      ], 
      providers: [ContactService, AddonService, MainService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

aap.component.ts

import {...}
import {Router, ActivatedRoute, Params} from '@angular/router';

constructor(private activatedRoute: ActivatedRoute) {
  // subscribe to router event
  this.activatedRoute.queryParams.subscribe((params: Params) => {
    console.log(params);
  });

}

它通过以下错误给出

未处理的承诺拒绝:没有基本的href设置.请提供APP_BASE_HREF标记的值或向文档添加基本元素.; 区域:; 任务:Promise.then; 值:错误:没有设置基本href.请提供APP_BASE_HREF标记的值或向文档添加基本元素.

角度应该如何知道基础href？

将ActivatedRouteSnapshot注入组件不起作用(也没有注入ActivatedRoute).这里的堆栈跟踪:

"Error: Can't resolve all parameters for ActivatedRouteSnapshot: (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?).
at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7042:33)
at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:73735:16)
at new SyntaxError (http://localhost:4200/vendor.bundle.js:6140:16)
at CompileMetadataResolver._getDependenciesMetadata (http://localhost:4200/vendor.bundle.js:19345:31)
at CompileMetadataResolver._getTypeMetadata (http://localhost:4200/vendor.bundle.js:19220:26)
at CompileMetadataResolver._getInjectableMetadata (http://localhost:4200/vendor.bundle.js:19208:21)
at CompileMetadataResolver.getProviderMetadata (http://localhost:4200/vendor.bundle.js:19450:40)
at http://localhost:4200/vendor.bundle.js:19408:49
at Array.forEach (native)
at CompileMetadataResolver._getProvidersMetadata (http://localhost:4200/vendor.bundle.js:19375:19)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:4200/vendor.bundle.js:18848:30)
at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:4200/vendor.bundle.js:18736:23)
at http://localhost:4200/vendor.bundle.js:18937:54
at Array.forEach (native)
at CompileMetadataResolver.loadNgModuleDirectiveAndPipeMetadata (http://localhost:4200/vendor.bundle.js:18936:41)"

在组件中,ActivatedRouteSnapshot注入如下:

constructor([...], private router: Router,
          private route: ActivatedRouteSnapshot) {
    [...]
}

ActivatedRouteSnapshot提供于app.component.ts:

@Component({ …

我已经设置了以下路由系统

export const MyRoutes: Routes = [
    {path: '', redirectTo: 'new', pathMatch: 'full'},
    {path: ':type', component: MyComponent}
];

并有以下导航系统

goToPage('new');
goToPageNo('new', 2);

goToPage(type) {
    this.router.navigate([type]);
}
goToPageNo(type, pageNo) {
    this.router.navigate([type], {queryParams: {page: pageNo}});
}

示例网址如下所示

HTTP://本地主机:3000 /新

HTTP://本地主机:3000 /新页= 2

HTTP://本地主机:3000 /更新

HTTP://本地主机:3000 /更新的页面= 5

有时他们有可选的 queryParams(页面)

现在我需要读取route params和queryParams

ngOnInit(): void {
    this.paramsSubscription = this.route.params.subscribe((param: any) => {
        this.type = param['type'];
        this.querySubscription = this.route.queryParams.subscribe((queryParam: any) => {
            this.page = queryParam['page'];
            if (this.page)
                this.goToPageNo(this.type, …

我正在尝试测试访问子级路由参数的Angular Resolver。

我的后卫工作正常，但是我无法轻松创建单元测试，因为我无法创建ActivatedRouteSnapshot带有子级路由（只读属性）。

我的解析器

@Injectable({
    providedIn: 'root'
})
export class MyResolverGuard implements Resolve<string> {

    constructor() {
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): string {
        return route.firstChild.paramMap.get('my-param');
    }
}

我的测试：

    it('should resolve chilren route params', () => {
        guard = TestBed.get(MyResolverGuard);
        const route = new ActivatedRouteSnapshot();
        // Cannot assign children because it's a read only property
        route.children = [...];
        const myResolverParams = guard.resolve(route, null);
    });

除了使用模拟以外，还有其他方法ActivatedRouteSnapshot吗？

我的测试后卫方法好吗？

感谢您分享您的策略。

Angular Routing文档提到了组件实例创建,组件实例激活和路由激活.

文档没有解释这些概念的差异,以及何时发生每个创建/激活.

问题

1. 实例创建和实例激活之间有什么区别？
2. 实例激活和路由激活之间有什么区别？
3. 实例激活是否始终与实例创建同时发生？

总结:目前尚不清楚组件实例激活和路由激活的真正含义,以及它与组件实例创建的关系(特别是时序方面).

已知信息

实例创建

• 当在不同类型的组件之间导航时,组件实例由Angular创建
• 在同一组件的实例之间导航时,默认情况下会重复使用这些实例

实例激活

• 当浏览器的位置URL更改为匹配路径段(例如/ crisis-center)时,路由器会激活相应组件的实例(例如CrisisListComponent)并显示其视图
• 当应用程序请求导航到路径(例如/危机中心)时,路由器激活相应组件的实例(例如CrisisListComponent),显示其视图,并使用该路径的URL更新浏览器的地址位置和历史记录

路线激活

• 在整个文档中提到了一些地方.见下文

Angular Doc References

以下是Angular文档中对上述三个概念的一些提及:

实例创建

默认情况下,路由器在重新导航到相同的组件类型时重新使用组件实例,而不首先访问其他组件.

...

此应用程序不会重复使用HeroDetailComponent.用户始终返回到英雄列表以选择要查看的另一个英雄.没有访问其中的列表组件,无法从一个英雄细节导航到另一个英雄细节.因此,路由器每次都会创建一个新的HeroDetailComponent实例.

链接

实例激活

当浏览器的位置URL更改为与路径段/危机中心匹配时,路由器将激活 CrisisListComponent 的实例并显示其视图.

链接

当应用程序请求导航到路径/危机中心时,路由器会激活 CrisisListComponent 的实例,显示其视图,并使用该路径的URL更新浏览器的地址位置和历史记录.

链接

路线激活

第三条路径中的data属性是存储与此特定路由关联的任意数据的位置.在每个激活的路由中都可以访问data属性.

链接

您还可以使用CanActivateChild防护来保护子路线.CanActivateChild后卫与CanActivate后卫相似.关键的区别在于它在激活任何子路由之前运行.

链接

在英雄细节和危机细节中,应用程序一直等到路线被激活以获取相应的英雄或危机.

链接

如果您通过保护检查,ActivatedRouteSnapshot包含将被激活的未来路由,并且RouterStateSnapshot包含应用程序的未来RouterState.

链接

1. Angular 路由器类和 Angular 激活路由类有什么区别？
2. 什么时候使用上面的类？