Как создать работающий пользовательский компонент в Ioni c v4? - PullRequest
Новая
       30

Как создать работающий пользовательский компонент в Ioni c v4?

2 голосов
/ 28 января 2020

Я новичок в Ioni c, я использую v4, я новичок в Angular и я тоже новичок в Typescript, поэтому, пожалуйста, потерпите меня и простите, если я задаю глупые вопросы. Я на Linux.

Я запустил новое приложение Ioni c с 

$ ionic start
[...]
Project name: comptest
Framework: Angular
Starter template: tabs
[...]

Затем я попробовал: 

$ cd comptest
$ ionic serve -l
[...]
? Install @ionic/lab? Yes
[...]

браузер открылся и приложение работало нормально. Затем я попытался сгенерировать новый пользовательский компонент: 

$ ionic generate component mySpan1
[...]
[OK] Generated component!

, который создал my-span1-component.ts среди других, который содержит: 

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

@Component({
  selector: 'my-span1',
  templateUrl: './my-span1.component.html',
  styleUrls: ['./my-span1.component.scss'],
})
export class MySpan1Component {

  constructor() { }

}

Обратите внимание, что я отредактировал селектор и заставил его выглядеть просто my-span1 вместо значения по умолчанию app-my-span1, но я больше ничего не трогал, даже тег html <p>, который в будущем станет вместо этого <span> по понятным причинам. Затем я попытался использовать <my-span1> на странице tab1, поэтому я отредактировал tab1.page.html и добавил тег <my-span1>: 

<ion-content>
    <my-span1></my-span1> <!-- This is my edit -->
    <ion-card class="welcome-card">
      <img src="/assets/shapes.svg" alt="" /> 
        [...]

После этого редактирование перестало работать. В консоли браузера я получаю эту ошибку:

'my-span1' не является известным элементом

Поиск в Google, что я нашел этот другой ТАК вопрос: Ioni c 4 не может импортировать пользовательский компонент, не является известным элементом

, но принятый ответ, по меньшей мере, весьма плох, и когда дело доходит до создания нового модуля, я вхожу в неизвестный (для меня) территория. В любом случае, я попробовал ionic generate module components, и это сработало, затем я объявил MySpan1Component в этом новом модуле: 

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

@NgModule({
  declarations: [
    MySpan1Component
  ],
  imports: [
    CommonModule,
  ]
})
export class ComponentsModule { }

Затем я импортировал новый модуль в модуль приложения, например: 

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ComponentsModule } from './components/components.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ComponentsModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

но я все еще получаю ту же ошибку в консоли, например 'my-span1' is not a known element. И я не знаю, что делать дальше.

Другой вопрос, который я нашел здесь , предлагает то же решение или добавить мой компонент в массив exports: пробовал тоже , но не повезло (та же ошибка в консоли): 

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
//import { ComponentsModule } from './components/components.module';
import { MySpan1Component } from './my-span1/my-span1.component';

@NgModule({
  declarations: [AppComponent, MySpan1Component],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, /*ComponentsModule*/],
  exports: [MySpan1Component],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Чего мне не хватает в моем коде, который заставил бы my-span1 работать?

1 Ответ

1 голос
/ 28 января 2020

Вы были на правильном пути:

  • создать новое приложение: ioni c запустить my-new-app
  • создать новый компонент: ioni c создать my- span1
  • добавить его в свой tab1.page.module как импорт + добавить в объявления

Примерно так: 

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';

import { MySpan1CompComponent } from '../my-span1-comp/my-span1-comp.component'; // add this import statement to the module within which you intend to use your new component

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }])
  ],
  declarations: [Tab1Page, MySpan1CompComponent] // add your component in here 
})
export class Tab1PageModule {}
...