标签: angular-router

ConfigService在 angular 应用程序引导之前，我写了一篇文章来获取配置详细信息。

下面的代码写在app.module.ts这个代码工作正常，我能够在应用程序加载之前加载配置。

...
providers: [
    {
        provide: APP_INITIALIZER,
        useFactory: configServiceFactory,
        deps: [ConfigService],
        multi: true
    }
]
...

但是，现在我想将有效负载传递给我必须从查询参数中读取的配置 API。

我尝试了以下但它抛出

...
@Injectable()
export class ConfigService {

    private _configData: any;

    constructor(
        private _http: Http,
        private _activatedRoute: ActivatedRoute
) {
}
...

如何读取 APP_INITIALIZER 服务中的查询参数？

在我的路由器配置中，我DashboardComponent在路径下配置了一个'dashboard'，我想在没有指定路径时自动将用户重定向到此路由（空路径，所以只是/）。

这是我的代码：

const appRoutes: Routes = [
  { path: '', redirectTo: 'dashboard'},
  { path: 'dashboard', component: DashboardComponent },
  /* other routes... */
];

未处理的承诺拒绝：路由 '{path:"", redirectTo:"dashboard"}' 的配置无效：请提供 'pathMatch'。'pathMatch' 的默认值是 'prefix'，但通常意图是使用 'full'

在 Angular 中，您始终可以在组件中注入ActivatedRoute以获取对当前激活路由的引用。

它有一个属性children：

包含当前路由下激活的所有子路由。

我想知道如何获得所有儿童路线（未激活的路线也是如此）。

在我的应用程序中，我想在两个路由器插座中显示内容，一个是主路由器插座，另一个是命名路由器。如果将两个出口都放在根级别，则可以像这样设置命名出口的内容：

this.router.navigate([{ outlets: { rootSecondary: ['rootSecondaryPath'] } }]);

但是，我希望应用程序的总体布局提供一个路由器出口，并能够在子路由中使用其他路由器出口结构。

如果创建子路由，该子路由也具有主要出口和命名出口，则无法设置次要出口的内容。报告的错误是：

无法匹配任何路线。

所述路线定义如下：

const appRoutes: Routes = [
  { path: '', component: RootPrimaryComponent },
  { path: 'rootSecondaryPath', component: RootSecondaryComponent, outlet: 'rootSecondary' },
  {
    path: 'child', component: ChildComponent, children:
      [
        { path: '', component: ChildPrimaryComponent },
        { path: 'childSecondaryPath', component: ChildSecondaryComponent, outlet: 'childSecondary' },
      ]
  },
];
const appRouting = RouterModule.forRoot(appRoutes);

app.component.html模板包含一个主要出口，以及-为了进行测试-一个命名的次要出口：

<router-outlet></router-outlet>
<div style="border: solid 1px green">
  <router-outlet name="rootSecondary"></router-outlet>
</div>

上面的代码是通过按钮调用的，它可以毫无问题地设置rootSecondary出口。

模板child.component.html定义了两个位于根主出口内的出口：

<router-outlet></router-outlet>
<div style="border:solid 1px …

玩弄 stackblitz 的起点，我添加了以下路由：

    const routes : Routes = [ {path: 'hello', 'component': HelloComponent}];


    @NgModule({
      imports:      [ 
        RouterModule.forRoot(routes, {enableTracing: true}) ],
      declarations: [ AppComponent, HelloComponent ],
    })

还向模板添加了 a <router-outlet>，单击以下链接时会呈现 ：app-component.htmlhello-component

<a routerLink="hello" routerLinkActive="active">hello</a>

但是，hello-component单击链接时组件上的属性为空：

@Input() name: string;

有没有办法通过模板表达式传入一个值，以便在组件上设置 name 属性并在单击锚点hello-component.ts的模板字符串中进行评估hello？

仅供参考，hello 组件如下所示：

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

    @Component({
      selector: 'hello',
      template: `<h1>Hello {{name}}!</h1>`,
      styles: [`h1 { font-family: Lato; }`]
    })
    export class HelloComponent  {
      @Input() name: string;
    }

似乎 …

我已将角度6版本更新为角度7版本.现在,当我尝试导航到' http:// localhost:4200/pages ' 时,我收到错误.我在我的应用程序中使用延迟加载路由概念.

错误:-

core.js:12584 ERROR错误:未捕获(在承诺中):错误:找不到模块'./Pages/Test/Test.module'错误:无法在$ _lazy_route_resource懒惰中找到模块'./Pages/Test/Test.module'命名空间对象:5,位于ZoneDelegate.push的Object.onInvoke(core.js:14143)的ZoneDelegate.push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke(zone.js:388). Zone.push上的/node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke(zone.js:387)../ node_modules/zone.js/dist/zone.js.Zone.run(zone.js: 138)在zone.les:872 at ZoneDelegate.push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask(zone.js:421),位于ZoneDelegate的Object.onInvokeTask(core.js:14134) Zone.push上的.push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask(zone.js:420)../ node_modules/zone.js/dist/zone.js.Zone.runTask( zone.js:188)$ _lazy_route_resource lazy namespace object:5 at ZoneDelegate.push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke(zone.js:388)at Object.onInvoke(core. js:14143)在ZoneDele zone.push ../ node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke(zone.js:387)在Zone.push ../ node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)

APP-routing.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes} from '@angular/router';

export const AppRoutes : Routes = [
 {
  path : '',
  redirectTo: 'test',
  pathMatch: 'full',
 }
 {
  path: 'test',
  loadChildren: './Pages/test/test.module#TestModule'
 }      
] …

我的应用程序的架构如下：

用户登录后，我导航到MainModule（懒惰），在那里注册MainModule组件中使用的服务。 CarService缓存 Web 服务的结果，因此，如果用户注销，我需要销毁此服务。当用户注销时，我导航到LoginModolue。

我认为导航到LoginModule，MainModule会被破坏（实际上我在MainModule 中注册它，而不是在 AppModule 中）但我注意到如果我再次登录，旧的缓存仍然存在。这是正常的吗？当我导航到LoginModule时，不应该破坏MainModule 中提供的服务吗？