代码之家 › 专栏 › 技术社区 › Gappy

为什么Angular要求一个独立的组件,即使它是

ionic-framework typescript angular

0

Gappy · 技术社区 · 7 月前

正如标题所说,我找不到我做错了什么。这是代码 circulo.component.ts :

import { Component, OnInit } from '@angular/core';
import { Circulo } from '../figura-geometrica';

@Component({
  selector: 'app-circulo',
  templateUrl: './circulo.component.html',
  styleUrls: ['./circulo.component.scss'],
  standalone: true,
})
export class CirculoComponent extends Circulo implements OnInit {

  override radio: number = 0;

  constructor(nombre:string, radio:number) {
    super(nombre, radio)
    this.radio = radio;
  }

   ngOnInit() {}

   override calcularPerimetro(): number {
    return this.radio * 2 * 3.1416
  }


}

这是它从第二行导入的内容 电路组件 , figura-geometrica.ts :

export abstract class FiguraGeometrica {
    nombre : string = "";

    constructor(nombre:string) {
        this.nombre = nombre;
    }

    abstract calcularPerimetro(): number
}

export class Circulo extends FiguraGeometrica {
    radio : number = 0;

    constructor(nombre:string, radio:number) {
        super(nombre)
        this.radio = radio;
    }
    override calcularPerimetro(): number {
        return this.radio * 2 * 3.1416
    }
}

export class TrianguloEscaleno extends FiguraGeometrica {

    ladoA : number = 0;
    ladoB : number = 0;
    ladoC : number = 0;

    constructor(nombre:string, ladoA:number, ladoB:number, ladoC:number) {
        super(nombre)
        this.ladoA = ladoA;
        this.ladoB = ladoB;
        this.ladoC = ladoC;
    }
    override calcularPerimetro(): number {
        return this.ladoA + this.ladoB + this.ladoC
    }
}

export class TrianguloEquilatero extends TrianguloEscaleno {    
    constructor(nombre:string, ladoA:number, ladoB:number, ladoC:number){
        super(nombre, ladoA, ladoB, ladoC)
    }
}

这就是我遇到问题的地方, home.page.ts :

import { Component } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone';
import { CirculoComponent } from "../modelo/circulo/circulo.component";

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, CirculoComponent], <- there
  standalone: true,
})
export class HomePage {
  constructor() {}
}

导入:[IonHeader、IonToolbar、IonTitle、IonContent、, 电路组件 ]<-这就是给我带来问题的原因,那就是:

Component imports must be standalone components, directives, pipes, or must be NgModules.(-992012)

我也认为 图形几何 没有必要,但我的老师就是这样做的,但举了一个更简单的例子。

1 回复 | 直到 7 月前

1

0

Yong Shun 7 月前

您需要添加 IonInput , IonItem ,以及 IonList 组件到 imports 数组用于 CirculoComponent .

import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';

@Component({
  ...,
  imports: [IonInput, IonItem, IonList],
})
export class CirculoComponent extends Circulo implements OnInit {
  ...
}

争论在 constructor 组件的依赖性注入器。对于您的场景,您需要添加/注册 Injection Token 对于 nombre 和 radio 进入 providers 无论是组件还是根应用程序/模块。接下来,使用 @Inject() 装饰器从DI中获取值。

import { Component, Inject, OnInit } from '@angular/core';
import { IonInput, IonItem, IonList } from '@ionic/angular/standalone';

@Component({
  selector: 'app-circulo',
  templateUrl: './circulo.component.html',
  styleUrls: ['./circulo.component.scss'],
  standalone: true,
  imports: [IonInput, IonItem, IonList],
  providers: [
    { provide: 'nombre', useValue: 'test' },
    { provide: 'radio', useValue: 1 },
  ],
})
export class CirculoComponent extends Circulo implements OnInit {
  constructor(
    @Inject('nombre') nombre: string,
    @Inject('radio') radio: number
  ) {
    super(nombre, radio);
    this.radio = radio;
  }
}

要将注入令牌添加到根应用程序:

bootstrapApplication(App, {
  providers: [
    ...,
    { provide: 'nombre', useValue: 'test' },
    { provide: 'radio', useValue: 1 },
  ],
});

Demo @ StackBlitz