Question

我将Angular 8与Ionic 4配合使用，并且从Ionic 3移走时，惰性加载发生了一些变化。

我有一个页面，其中有另一个页面（相同的路线），并且在最后一页中有一个组件。该组件可以在不同的页面/组件上使用。

所以在我的app-routing.module.ts上我有这样的东西：

{
    path: 'welcome',
    data: {
      preload: true
    },
    children: [
      {
        path: '',
        loadChildren: './pages/welcome/welcome.module#WelcomePageModule'
      }
    ]
  },

非常简单，因为正如我所说的那样，这条路线没有改变，但是为什么我需要在welcome.module.ts内也使用它？

imports: [
    CommonModule,
    CreateAccountPageModule, <--- this is the other page inside (it's a completely different page from other link so I reuse it here)
    RouterModule.forChild([
      {
        path: '',
        component: WelcomePage
      }
    ])
    // IonicPageModule.forChild(WelcomePage)
  ],

我需要RouterModule吗？如果我需要更新路径，是否需要修改两个文件？

对于需要在CreateAccountPage内部加载的组件，应该如何加载？我尝试了上述方法，将MyComponentModule加载到CreateAccountPageModule内，但是没有用：

模板解析错误：“我的组件”不是已知元素

Answer 1

您可能正在以另一种方式这样做。

使用选择器调用组件时要注意的两个重要事项

父子组件都必须在模块中声明。在您的情况下，CreateAccountPage是父组件，MyComponentComponent是子组件。

declarations: [CreateAccountPage]
如果在父级之外的其他模块中声明了子级，则必须在父级中导入该模块。

imports: [BrowserModule]

所以我想您可能应该像这样在父模块的import属性中导入子模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [
    CreateAccountPage
  ],
  imports: [
    BrowserModule, MyComponentModule
  ],
  providers: [],
  bootstrap: [CreateAccountPage]
})
export class CreateAccountPageModule { }

Answer 2

基本上，我们从Angular 8中有2种不同的延迟加载：

具有路由：

在app-routing.module.ts内部，我们可以找到以下内容：

const routes: Routes = [
  { path: '', redirectTo: 'welcome', pathMatch: 'full' },
  {
    path: 'test',
    children: [ // we can use loadChildren directly but this is just to demonstrate that we could have child routes as well
      {
        path: '',
        loadChildren: () =>
          import('./pages/test/test.module').then(
            m => m.TestPageModule
          )
      },
      {
        path: 'my-test',
        loadChildren: () =>
          import('./pages/my-test/my-test.module').then(
            m => m.MyTestPageModule
          )
      }
    ]
  },
  { path: '**', redirectTo: 'something' }
];

这意味着我们有2个页面，其中2条路线是延迟加载的：

/test
/test/my-test

注意：看到my-test位于test内部，但是我们可以将其移到2个完全不同的页面之外

无路由：

这是延迟加载组件的经典方法。在组件内部创建一个my-test.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyTestComponent } from './my-test.component';

@NgModule({
  declarations: [MyTestComponent],
  imports: [CommonModule],
  exports: [MyTestComponent]
})
export class MyTestComponentModule {}

现在，我们唯一要做的就是将模块导入到要显示它的页面/组件上。因此，如果我们想在MyTestComponent中显示TestPage，我们将转到test.module.ts并添加以下导入： import: [MyTestComponentModule]并按以下方式使用它： <app-my-text></app-my-test>

注意：注意组件名称前的app。当您从终端创建组件时，Angular CLI会自动添加它

有关Angular市长版本更新的信息，我推荐此指南：https://update.angular.io/#5.2:8.0
有趣的读物：https://www.joshmorony.com/using-angular-routing-with-ionic-4/

Angular中共享的延迟加载组件

2 个答案:

具有路由：

无路由：