javascript - angular8 组件没有显示它的 html？

Question

我有一个angular8应用程序，其中有一个名为“shop”的模块，其目录结构如下：

这是我shop.module.ts declarations的imports，，，providers

declarations: [
HomePartialComponent,
ProductsComponent,
ProductComponent,
ProductDetailsComponent,
ProductDialogComponent,
ProductLeftSidebarComponent,
ProductVerticalComponent,
ProductCarouselTwoComponent,
PriceComponent,
ShopComponent,
BrandsComponent,
CategoriesComponent,
PopularProductsComponent,
ProductZoomComponent,
MainCarouselComponent
],

imports: [
CommonModule,
SharedModule,
FormsModule, 
SwiperModule,
ReactiveFormsModule,
FlexLayoutModule,
NgxPaginationModule,
NgxImageZoomModule.forRoot()
],

providers : [ProductService,CartService,SidebarMenuService]

这是我shop.component.html在其中调用home-partial组件的代码

但我的home-partial组件没有显示它的 html。shop.component.html它显示在像这样的检查元素中

这是home-partialcomponen.html 代码

<div class="carousel-2">
    <div class="container ctn-box">
        <div class="" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column">
            <div class="slider-categories" fxFlex="100" fxFlex.gt-md="25" fxFlex.md="40">
                <div class="categories-wrap">
                    <div class="title"> TOP CATEGORIES</div>
                    <app-categories></app-categories>
                    <div class="btn-sale">
                        <button mat-raised-button color="primary">USE THE DISCOUNT - 60% OFF</button>
                    </div>
                </div>
            </div>
            <div class="carousel-2-wrapper" fxLayout.sm="column" fxFlex="100" fxFlex.gt-md="75" fxFlex.md="60" fxFlex.sm="100">
                <app-main-carousel [slides]="slides"></app-main-carousel>
            </div>
        </div>
    </div>
</div>
<div class="home-2-wrap">
    <div class="info-bar2-wrap">
        <div class="container">
            <div fxLayout="row wrap" class="info-bar">
                <div class="card-wrap" fxFlex="100" fxFlex.gt-md="25" fxFlex.gt-xs="50">
                    <mat-card class="light-block" fxLayout="row" fxLayoutAlign="start center">
                        <mat-icon class="mat-icon-xlg  m-0">card_giftcard</mat-icon>
                        <div class="content">
                            <p>BONUS PLUS</p>
                            <span class="text-muted m-0">Get a bonus plus for buying more that three products</span>
                        </div>
                    </mat-card>
                </div>
                <div class="card-wrap" fxFlex="100" fxFlex.gt-md="25" fxFlex.gt-xs="50">
                    <mat-card class="light-block" fxLayout="row" fxLayoutAlign="start center">
                        <mat-icon class="mat-icon-xlg  m-0">local_shipping</mat-icon>
                        <div class="content">
                            <p>FREE SHIPPING</p>
                            <span class="text-muted m-0">Free shipping on all orders over $99</span>
                        </div>
                    </mat-card>
                </div>
                <div class="card-wrap" fxFlex="100" fxFlex.gt-md="25" fxFlex.gt-xs="50">
                    <mat-card class="light-block" fxLayout="row" fxLayoutAlign="start center">
                        <mat-icon class="mat-icon-xlg m-0">monetization_on</mat-icon>
                        <div class="content">
                            <p>MONEY BACK GUARANTEE</p>
                            <span class="text-muted m-0">100% money back guarantee</span>
                        </div>
                    </mat-card>
                </div>
                <div class="card-wrap" fxFlex="100" fxFlex.gt-md="25" fxFlex.gt-xs="50">
                    <mat-card class="light-block" fxLayout="row" fxLayoutAlign="start center">
                        <mat-icon class="mat-icon-xlg m-0">history</mat-icon>
                        <div class="content">
                            <p>ONLINE SUPPORT 24/7</p>
                            <span class="text-muted m-0">Call us: 02 3555 65454 55</span>
                        </div>
                    </mat-card>
                </div>
            </div>

        </div>
    </div>
    <div class="products sec-padding">
        <div class="container">
            <mat-tab-group>

                <mat-tab label="FEATURED PRODUCTS">

                    <app-product-carousel-two [product]="products | slice:0:5"></app-product-carousel-two>


                </mat-tab>

                <mat-tab label="LATEST PRODUCTS">

                    <app-product-carousel-two [product]="products | slice:5:13"></app-product-carousel-two>

                </mat-tab>

                <mat-tab label="ON SALE PRODUCTS">

                    <app-product-carousel-two [product]="products | slice:13:22"></app-product-carousel-two>

                </mat-tab>

            </mat-tab-group>
        </div>

    </div>
    <div class="banners-wrap">
        <div class="container">
            <app-banners [banners]="banners"></app-banners>
        </div>
    </div>
    <div class="products-vertical-wrap">
        <div class="container">
            <app-product-vertical [products]="products"></app-product-vertical>
        </div>
    </div>
</div>

这是shop.component.ts代码

import { Component, OnInit } from '@angular/core';
import { Product } from 'src/app/modals/product.model';
import { CartItem } from 'src/app/modals/cart-item';
import { ProductService } from './../../../../services/product.service';
import { CartService } from './../../../../services/cart.service';


@Component({
  selector: 'app-home-partial',
  templateUrl: './home-partial.component.html',
  styleUrls: ['./home-partial.component.sass']
})


export class HomePartialComponent implements OnInit {


  products: Product[];
  public banners = [];

  shoppingCartItems: CartItem[] = [];
  wishlistItems  :   Product[] = [];

  public featuredProducts: Array<Product>;
  public onSaleProducts: Array<Product>;
  public topRatedProducts: Array<Product>;
  public newArrivalsProducts: Array<Product>;

  public slides = [
    { title: 'Huge sale', subtitle: 'Up to 70%', image: 'assets/images/carousel/banner1.jpg' },
    { title: 'Biggest discount', subtitle: 'Check the promotion', image: 'assets/images/carousel/banner2.jpg' },
    { title: 'Biggest sale', subtitle: 'Dont miss it', image: 'assets/images/carousel/banner3.jpg' },
    { title: 'Our best products', subtitle: 'Special selection', image: 'assets/images/carousel/banner4.jpg' },
    { title: 'Massive sale', subtitle: 'Only for today', image: 'assets/images/carousel/banner5.jpg' }
  ];

  constructor(private productService: ProductService, private cartService: CartService) { }

  ngOnInit() {
    this.cartService.getItems().subscribe(shoppingCartItems => this.shoppingCartItems = shoppingCartItems);
    this.productService.getProducts()
    .subscribe(
      (product: Product[]) => {
        this.products = product;
      }
    )
    this.productService.getBanners()
    .subscribe(
      data => this.banners = data
    );
  }

}

在shop组件中header并且footer显示正确，但只是“home-partial”组件没有显示它的 html。谁能指导我如何解决这个问题？

标签： javascriptangulartypescriptangular8