Início / user-18794136

liberlux's questions

Martin Hope
liberlux
Asked: 2023-08-23 00:40:06 +0800 CST
  • 5

Estou analisando o padrão de design Core/Shared/Feature para projetar aplicativos grandes e escalonáveis ​​em Angular e estou um pouco confuso sobre o assunto de modelos.

Existe um consenso sobre qual módulo eles devem ser adicionados?

Eu li uma postagem que afirma que os modelos só devem entrar nos módulos de recursos. No entanto, se os modelos devem ser reutilizados, para onde devem ir: o módulo principal ou o modelo partilhado?

Como o módulo principal é reservado para itens singleton, faz algum sentido armazenar algum modelo lá?

Como acompanhamento, os modelos que são usados ​​apenas uma vez por recurso devem ser armazenados em seus respectivos módulos de recursos?

Obrigado.

angular
Martin Hope
liberlux
Asked: 2023-08-17 21:53:20 +0800 CST
  • 6

Eu criei um componente personalizado chamado core.componente o importei para um módulo com o mesmo nome.

core.component.html

<div class="container-fluid text-left">
    <div class="row rows-cols-2 top-bar">
      <div>
        <h1>[Title]</h1>
      </div>
      <div class="w-100"></div>
      <div>
        <h4>[Subtitle]</h4>
      </div>
    </div>
  
    <div class="row align-baseline side-panel">
      <div class="col-3">
        <nav class="navbar bg-body-tertiary">
          <a class="navbar-brand" href="#">Option 1</a>
        </nav>
        <nav class="navbar bg-body-tertiary">
          <a class="navbar-brand" href="#">Option 2</a>
        </nav>
      </div>
      <div class="col-9">
      </div>
    </div>
  </div>

core.component.ts

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

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

  constructor() { }

  ngOnInit(): void {
  }

}

core.module.ts

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

import { CoreComponent } from './core.component';

@NgModule({
  declarations: [
    CoreComponent
  ],
  imports: [
    CommonModule
  ]
})
export class CoreModule { }

Por fim, importo o módulo principal para meu módulo de aplicativo raiz para que fique disponível para eu exibi-lo no <app-root>elemento.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { CoreModule } from './core/core.module';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CoreModule  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<app-core></app-core>

Infelizmente, em vez de renderizar o HTML do componente principal, o compilador retorna a seguinte mensagem, informando que não pode reconhecer o componente que importei por meio do módulo principal.

Error: src/app/app.component.html:2:1 - error NG8001: 'app-core' is not a known element:
1. If 'app-core' is an Angular component, then verify that it is part of this module.
2. If 'app-core' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2 <app-core></app-core>
  ~~~~~~~~~~
angular