标签: angular-router

我目前正在开发一个使用独立组件的 Angular 应用程序（版本 16.1.3）。该应用程序还依赖于使用 NgModules 的 Angular 库。我正在尝试将此库中的组件导入到我的应用程序中，其中该库还包含一个从应用程序中检索环境数据的函数。

这是ui-lib.module.ts图书馆的

export class UiLibModule {
    public static forRoot(environment: any): ModuleWithProviders<UiLibModule> {
        return {
            ngModule: UiLibModule,
            providers: [
                {
                    provide: 'environment',
                    useValue: environment,
                },
            ],
        };
    }
}

在我的主应用程序中，我将库导入到我的main.ts文件中，如下所示：

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
    ...
    UiLibModule.forRoot(environment),
    ...)
    ]
...});

但是，当我尝试使用库中的组件时遇到问题：

• 如果我在主应用程序内但在 之外使用库组件<router-outlet></router-outlet>，则一切都会按预期工作。
• 如果我在 中路由的组件中使用我的库中的相同组件<router-outlet></router-outlet>，我就会遇到问题。组件显示正确，但离开页面时，路由器无法从页面中删除该组件。此外，控制台中不会显示任何错误。

以下是我在独立组件中导入 UiLibModule 的方法：

...
@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  imports: [
    UiLibModule
  ]

.forRoot()我已经使用使用该函数的库和不使用该函数的库对此进行了测试。似乎未使用的库.forRoot()按预期工作，而使用的库则遇到了上述问题。

我的问题涉及我的图书馆的正确和完整包含。我不确定当前导入库的方式是否准确且全面。具体来说，我很好奇是否有一种方法可以通过独立组件直接添加环境。

此外，我不确定是否需要在独立组件中再次声明环境，因为它已经在 …

我有以下app root:

@Component({
    selector: 'my-app',
    providers: [],
    templateUrl: `<button (click)="callChildFunction()">Close</button>
                  <router-outlet></router-outlet>`
})
export class AppComponent {

    constructor() {

    }

    callChildFunction(){
        // Call myFunction() here
    }

}

这是我的孩子(使用的组件router-outlet):

@Component({
    selector: 'child',
    providers: [],
    templateUrl: `<div>Hello World</div>`
})
export class ChildComponent {

    constructor() {

    }

    myFunction(){
        console.log('success');
    }

}

我发现我可以使用RouterOutlet来获取组件函数,但似乎无法从应用程序根目录中访问它.

如何myFunction()从应用程序根调用？

我有Angular 4.3.6项目,其中模板片段产生此错误.

模板块:

<a [routerLink]="['/article',article?.id]">{{article?.title}}</a>

错误堆栈跟踪:

ArticleSpComponent.html:26 ERROR TypeError: Cannot read property 'outlets' of null
    at createNewSegmentGroup (router.es5.js:2967)
    at updateSegmentGroup (router.es5.js:2896)
    at router.es5.js:2914
    at forEach (router.es5.js:593)
    at updateSegmentGroupChildren (

错误原因似乎很明显.article变量从Http获取异步并在页面呈现后初始化,因此首先它为null.不过我认为那么推？在此变量之后允许避免此问题.

你能给些建议么？

我的Angular应用程序模块有以下路由路径:

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: 'documents',
                data: { myObject: MyConstants.OPTION_ONE },
                children: [
                    {
                        path: ':ID_DOC',
                        children: [
                            { path: 'edit', component: EditDocumentComponent },
                            { path: '', component: DocumentDetailsComponent },
                        ]
                    },
                    { path: 'add', component: AddDocumentComponent },
                    { path: '', component: DocumentsListComponent }
                ]
            }
        ])
    ],
    exports: [
        RouterModule
    ]
})

export class DocumentsManagementRoutingModule {
}

正如您所看到的,我使用dataproperty将一些数据传递给"documents"中的每个路径,因此我可以从路由路径中声明的任何组件中获取它:

例如,以下是我如何获取数据DocumentDetailsComponent:

export class DocumentDetailsComponent implements OnDestroy {
    private obsData: Subscription;
    private option: any;

    constructor(private route: …

我们希望将我们的大型前端项目划分为多个单独部署的项目,这些项目更易于使用.我试图包含一个捆绑的ngModule来处理来自另一个应用程序的路由.应用程序必须不知道彼此的配置.捆绑包将通过全局变量共享一些大的依赖项(如Angular).我们不需要动摇捆绑包,我们可能只需要接受一些重复的依赖项.

根路由器抱怨说

Error: No NgModule metadata found for 'TestsetModule'.

这让我相信子模块在加载时没有进行角度编译,或者由于某种原因没有注册其模块.我认为可能需要手动编译模块,但我不知道如何使用这个https://angular.io/api/core/Compiler#compileModuleAndAllComponentsAsync

根应用程序通过路由加载子项:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const load = require("little-loader");


const routes: Routes = [
  { path: ``, loadChildren: () => new Promise(function (resolve) {
      load('http://localhost:3100/testset-module-bundle.js',(err: any) => {
        console.log('global loaded bundle is: ', (<any>global).TestsetModule )
        resolve((<any>global).TestsetModule)
      }
    )
  })}
];

export const HostRouting: ModuleWithProviders = RouterModule.forRoot(routes);

我也尝试使用角度路由器的字符串解析语法,而不是你看到的这个奇怪的全局事物,但我有类似的问题.

这是正在加载的模块,除了全局导出之外非常标准:

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

我正在尝试实现一个简单的角度路线

const appRoutes: Routes = [
   { path: ''        ,redirectTo: '/recipes', pathMatch: 'full'},
   { path: 'recipes'              , component: RecipesComponent},
   { path: 'recipes/:recipeName'  , component: RecipesComponent},
];

在一些生成列表的组件中,我有一个函数,点击更新状态变量和路由,虽然我也有初始化时发生的提取机制订阅.

  ngOnInit() {
    this.route.params
      .subscribe(
        (params: {Params}) => {

          this.selectedRecipe = this.findRecipeByName(params['recipeName']);  
        });
  }


   navRecipe(recipeName: string): void {
      let path = '/recipes/' + recipeName;
      this.selectedRecipe = this.findRecipeByName(recipeName);
      this.router.navigate([path]);
   }

但是,当我尝试单击一个重新路由到带有参数的组件的链接时,我得到以下内容:

core.js:1350 ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence
EmptyError: no elements in sequence
    at new EmptyError (EmptyError.js:28)
    at FirstSubscriber._complete (first.js:154)
    at …

我在我的Angularv5应用程序中使用@ngrx/router-store我最近开始遇到一个错误:( Navigation ID X is not equal to the current navigation id Y其中X和Y是整数).

这个问题一直发生,当我浏览来路由来自特定路由B.从任何其他途径向导航路线A似乎很好地工作.

我发现的与此相关的唯一其他SO问题提供了可能由于多次快速更新导航而导致问题的可能性.为了测试这是否发生(它不应该),我订阅了我的根组件内的路由器导航事件,在订阅中设置了一个断点,并打开了一个调试会话来逐步解决问题.这样做,我可以看到

1. 假设当前导航ID为11.当我导航到问题路径时,路由器开始导航,成功执行包括的每个导航事件NavigationEnd,然后立即@ ngrx/router-store抛出一个'ROUTER_CANCEL'操作,说明:Navigation ID 12 is not equal to the current navigation id 13.据我所知,12是正确的导航ID(同样,导航ID 11完成并立即'ROUTER_CANCEL'抛出,而路由器不会发出任何进一步的导航事件).此外,'ROUTER_CANCEL'操作有效负载包含导致问题的路由器导航事件,以及导致问题时的存储状态.导致问题的事件的ID为12,当时商店中的路由器状态的ID为11.因此,12似乎是正确的导航ID,不应该抛出错误.

2. 在从问题路径导航到用户配置文件路由时,在@ ngrx/router-store取消导航之前不会发生其他导航.(即我没有快速更新导航路线)

3. 除了ngrx调度'ROUTER_CANCEL'操作之外,不报告任何错误(并且不会抛出任何错误).

再次,遇到问题的路线工作正常,除非从特定路线B开始导航.据我所知,这条特定路线B没有任何不同或不同寻常的问题(问题路线也不关心人们来自何处 - 这两条路线彼此没有关联).

最后一两件事:触发错误调试会话之外似乎总是在形式造成的错误Navigation ID X is not equal to the current navigation id X+1,但是引发了调试会话中的错误可能导致Navigation ID 11 is not equal to the current navigation id 15 …

我正在努力使用Angular框架来使我的应用程序顺利运行,但我无法解决路由问题.我有一个顶级,AppComponent并app-routing.module.ts通过我的自定义管理导航SlideMenuComponent.我简化的html模板AppComponent:

<app-slide-menu [buttons]="menuButtons"></app-slide-menu>
<router-outlet></router-outlet>

我SlideMenuComponent的以下html为核心:

<nav><div *ngFor="let button of buttons">
    <a routerLink="{{button.routerLink}}"
    >{{button.name}}</a>
</div></nav>

用户可以导航'/courses'到此幻灯片菜单,该菜单由CoursesComponent分页指向由指向CourseComponent服务器检索的特定s的链接监督.这些组件位于各自的courses.module.ts模块中courses-routing.module.ts.但是,当我点击任何这些链接时,我会收到Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?控制台警告,ngOnInit()不会被打开CourseCompontent,并且它不会更新,直到我点击页面上的任何按钮.我router.navigate()通过转发此任务解决了手动导航时出现此问题NgZone.runTask(router.navigate()),但为什么会发生anchor标签和routerLinkdirecrives？这是我的CoursesComponent代码摘录:

<nav><ul>
        <li *ngFor="let course of api.data | paginate: {
            currentPage: currentPage, itemsPerPage: limit, totalItems: api.total
        }">
           <a
               [routerLink]="course._id"
               [queryParams]="{ …

给定路由配置

{
   path: '/root/:rootId',
   children: [{
       path: '/child1/:child1Id',
       children: [{
           path: '/child2/:child2Id
           component: TestComponent
       }]
   }]
}

在TestComponent中,我如何轻松获得所有路径参数.我想知道是否有比这更简单的方法

let rootId = route.parent.parent.snapshot.params;
let child1Id = route.parent.snapshot.params;
let child2Id = route.snapshot.params;

这似乎过于多余,特别是如果我正在观察路线参数可观察而不是通过路线快照访问参数.这个方法看起来也很脆弱,因为它会破坏如果我移动任何路线/参数周围.我习惯于角度ui-router,其中提供了单个对象$ stateParams,所有param数据都可以轻松访问.我从路由树中的单个节点访问路由解析数据时也遇到了这些问题.任何帮助将非常感激.提前致谢

我正在研究它好几天,但到目前为止还没有找到任何解决方案.

我有一个解析器服务,它应该返回一个Observable:

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<any>|Promise<any>{
    return Observable.forkJoin(
         this.http.get(first call with queryParam),
         this.http.get(second call with queryParam),             
    );
}

我订阅了组件中的ActivatedRoute数据,并且它运行良好.

但是,正如您在上面的代码中看到的,我的组件有一个queryParam,我的API调用依赖于这个queryParam.当我手动更改它时,它不会再次"解析"该路线.

我完全理解为什么,我阅读了文档.

有没有人有解决方法？在这种情况下,这甚至可以订阅params并返回一个Observable吗？

到目前为止我试过这个,但是它没有返回一个Observable,所以它什么也没做:

this.router.events.subscribe(event => { 
    if(event instanceof ResolveEnd){
      // My previous Observable.forkJoin
    }
});

谢谢 :) !

----------- 解决方案(感谢Maximus): -----------

添加路由:

{
   path: 'some path',
   runGuardsAndResolvers: 'paramsOrQueryParamsChange'
   ...
}

然后,无需订阅路线事件或任何东西!魔法 !