时间戳

首页 > 解决方案 > 子组件不呈现 - Angular

javascript - 子组件不呈现 - Angular

问题描述

我在共享模块上创建了一个子组件，以显示警报消息。但是当我将它注入到我的父组件中时，我在控制台中看到了标签，但在我的组件中没有看到 Bootstrap 的卡片。

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 { }

私有模块.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>

然后我在我的控制台中得到这个，我们可以看到组件中的标签，但里面什么都没有。

在控制台中渲染

标签： javascriptangulartypescriptparent-child

解决方案

检查您的实际文件名和您在模板 url 中使用的文件名，我认为它们是不同的。实际文件名和模板 url 路径中的文件名应该匹配

推荐阅读