Ionic 4 (Angular 7) - 共享组件问题

Question

我正在尝试为 Angular 这样的框架做一件非常平常的事情。目标是通过共享模块多次使用相同的 (HeaderComponent) 组件。

我的shared.module.ts:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { HeaderComponent } from '../header/header.component';
import { IonicModule} from '@ionic/angular';

@NgModule({
    imports: [
        CommonModule, 
        IonicModule
    ],
    declarations: [
        HeaderComponent
    ],
    exports: [
        HeaderComponent
    ]
})

export class SharedModule {}

在 app.module.ts 我添加了这个：

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, SharedModule],

在 home.page.html 中，我尝试以这种方式呈现它：

<app-header></app-header>

它确实有效，因为浏览器向我显示了

之类的错误

'ion-col' is not a known element

等等来自 HeaderComponent 的所有离子组件。

我在 Internet 上找到了解决该问题的方法，建议将 IonicModule.forRoot(HeaderComponent) 添加到 [=41= 的 imports 数组中]，但这种方法会导致以下错误：

'app-header' is not a known element

好像没有了。

Answer 1

您还必须像这样将离子模块添加到您的共享模块中：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { HeaderComponent } from '../header/header.component';
import { IonicModule } from 'ionic-angular';

@NgModule({
  imports: [
    CommonModule,
    IonicModule
  ],
  declarations: [
    HeaderComponent
  ],
  exports: [
    HeaderComponent
  ]
})

export class SharedModule {}

如果您使用的是 ionic 4，则必须将 IonicModule 的导入编辑为：

import { IonicModule } from '@ionic/angular';

Answer 2

就我而言，问题是我试图在使用模式打开的组件中包含自定义组件。我需要将我的组件添加到父页面的模块中。

Answer 3

我在尝试创建第三个模块（即共享模块）时遇到了很多问题，所以我发现这非常有帮助： https://forum.ionicframework.com/t/ionic-4-create-shared-component-up-to-date-example-please/176887

我没有遵循关于删除内容的部分，但我确实向我的组件添加了一个模块（在同一文件夹中）。然后在其他页面中，我能够在顶部导入这个模块，然后在导入数组中导入并且成功了。

最终我不得不导入其他的东西，就像加里上面所说的，但这只是常识。

我在网上找到的大多数教程都是让您创建另一个组件，然后使用它附带的模块。按照这种思路，我感到非常困惑。我认为基本上可以归结为，您可以共享模块，但不能共享组件。不要引用我的话，但这就是我现在的理解。

header.component.html

     <ion-header>
...

    </ion-header>

header.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { feedService } from "../services/feed.service";

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
 ...
  constructor() {}

  ngOnInit() {}
}

header.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { HeaderComponent } from "./header.component";

@NgModule({
    imports: [
      ...  
    ],
    declarations: [HeaderComponent],
    exports: [HeaderComponent],
  })
  export class HeaderModule{
  }

最终在该页面的 module.ts

的其他地方使用它

import ... //other modules

import { HeaderModule  } from "../header/header.module";  //your relative path

@NgModule({
  imports: [
    //other modules
    HeaderModule,
  ],
  declarations: [],
  entryComponents: [],
})
export class MyPageModule {}

然后在该页面的 html 文件中，我可以使用上面 header.component.ts 中声明的选择器。

<app-header ...></app-header>

Ionic 4 (Angular 7) - 共享组件问题

Ionic 4 (Angular 7) - sharing components issue

angular

ionic4