Блог

Я создал дочерний компонент в своем общем модуле для отображения предупреждающего сообщения. Но когда я ввел его в свой родительский компонент, я увидел тег в своей консоли, но не загрузочную карту внутри моего компонента.

alertmessage.component.ts :

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

@Component({
  selector: 'alertmessage',
  templateUrl: './alert-message.component.html',
  styleUrls: ['./alert-message.component.scss']
})
export class AlertMessageComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
  

alertmessage.component.html :

 <div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
  

shared.module.ts :

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TranslateModule } from '@ngx-translate/core';
import { NgxBootstrapModule } from './modules/ngx-bootstrap.module';
import { BeginsWithPipe } from './pipes/begins-with.pipe';
import { ShortUrlPipe } from './pipes/short-url.pipe';
import { AlertMessageComponent } from './components/alert-message/alert-message.component';

@NgModule({
  declarations: [AlertMessageComponent],
  imports: [
    CommonModule,
    NgxBootstrapModule,
    TranslateModule
  ],
  exports: [
    CommonModule,
    NgxBootstrapModule,
    TranslateModule,
    AlertMessageComponent
  ],
  providers: []
})
export class SharedModule { }
  

Вот мой состав папки :

 Core
Shared
    Components
        alert-message
            .ts
            .html
            .css
    Pipes
    shared.module.ts
Public
Private
    admin
        admin
        qr-code-management
            .ts
            .html
            .css
            create
                .ts
                .html
                .css
            update
                .ts
                .html
                .css
        upload-file
        admin.module.ts
    private.module.ts
  

admin.module.ts

 import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { ZXingScannerModule } from '@zxing/ngx-scanner';
import { NgxKjuaModule } from 'ngx-kjua';
import { SharedModule } from 'src/app/shared/shared.module';
...

@NgModule({
  declarations: [...],
  imports: [
    CommonModule,
    SharedModule,
    FormsModule, ReactiveFormsModule,
    CKEditorModule,
    ZXingScannerModule,
    NgxKjuaModule
  ],
  exports: [
    FormsModule, ReactiveFormsModule,
    CKEditorModule,
    ZXingScannerModule,
    NgxKjuaModule
  ]
})
export class AdminModule { }
  

private.module.ts

 import { NgModule } from '@angular/core';
import { PrivateRoutingModule } from './private-routing.module';
import { SharedModule } from '../shared/shared.module';
import { AdminModule } from './admin/admin.module';

@NgModule({
  declarations: [],
  imports: [
    SharedModule,
    PrivateRoutingModule,
    AdminModule
  ]
})
export class PrivateModule { }
  

И, например, в моем update.component.html

 <h1 class="card-header blue">QR CODE MANAGEMENT - UPDATE</h1>
<alertmessage></alertmessage>
  

Затем я получаю это в своей консоли, где мы можем видеть тег в компоненте, но ничего внутри..

проверьте ваше фактическое имя файла и то, которое вы использовали в URL-адресе шаблона, я думаю, они разные. фактическое имя файла и имя в URL-адресе шаблона должны совпадать