Question

我试图在角度2中实现延迟加载。
我已经通过跟随this link创建了延迟加载。我有两个组件，如home1和home2。 home1有顶级新闻栏，home2用于列出其他新闻。
第一次只显示home1。
用户滚动页面后，必须在home1中加载home2。（比如在MVC中调用局部视图）。

我尝试在home1中调用home2作为<app-home2-list></app-home2-list>

但是收到错误。

我不知道如何在home1 html中调用home2 html？。还有其他方法可以实现吗？

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { MenuComponent } from './menu.component';
import { HomeComponent } from './home/home.component';
import { Const_Routing } from './app.routing';
import { HttpModule } from '@angular/http';
import { Home2ListComponent } from './home2/home2-list/home2-list.component';
import { Home1ListComponent } from './home1/home1-list/home1-list.component';



@NgModule({
  declarations: [
    AppComponent,
    MenuComponent,
    HomeComponent,
    Home1ListComponent,
    Home2ListComponent
  ],
  imports: [
    BrowserModule,
    Const_Routing,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

home1-list.component.ts和home2-list.component.ts（两个代码相同，api调用不同）：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ViewEncapsulation } from '@angular/compiler/src/core';
import { DatePipe } from '@angular/common';
import { Router } from '@angular/router';
import '../../../assets/scripts/endlessriver.js';
import * as $ from 'jquery';
import { SharedService } from '../../Services/shared.service';
import { Home1Service } from './home1.service';
import { Home2ListComponent } from '../../home2/home2-list/home2-list.component';

declare var jQuery: any;

@Component({
  selector: 'app-home1-list',
  templateUrl: './home1-list.component.html',
  styleUrls: ['./home1-list.component.css','../../../assets/styles/common.css','../../../assets/styles/endlessriver.css'],
  providers: [Home1Service,SharedService]
})
export class Home1ListComponent implements OnInit {

  constructor(public Service: Home1Service,public CommonService:SharedService) { }

  @ViewChild('marqueeID') input: ElementRef;

  HomeList:any;
  HomeList1:any;
  HomeList2:any;
  HomeList3:any;
  sectionName:string;
  datetime:string;
  productId:number=2;
  getListingData(sectionName)
  {
              this.Service.getListingNews(sectionName,15).subscribe(
                  data => {
                      this.HomeList = data.map(e => {
                          return { SectionName:e.ChildName,ArticleId:e.ArticleId, HeadLine: e.HeadLine, Abstract: e.Abstract, ImageLink: e.ImageLink ,UpdatedDate:this.CommonService.getDateFormat(new Date(e.UpdatedDate),'others').toString()};
                      })
                  },
                  error => { console.log(error) });
                  this.Service.getListingNews("world",5).subscribe(
                    data => {
                        this.HomeList1 = data.map(e => {
                            return { Heading:'world',SectionName:e.ChildName,ArticleId:e.ArticleId, HeadLine: e.HeadLine, Abstract: e.Abstract, ImageLink: e.ImageLink ,UpdatedDate:this.CommonService.getDateFormat(new Date(e.UpdatedDate),'others').toString()};
                        })
                    },
                    error => { console.log(error) });
                    this.Service.getListingNews("national",5).subscribe(
                        data => {
                            this.HomeList2 = data.map(e => {
                                return {Heading:'national', SectionName:e.ChildName,ArticleId:e.ArticleId, HeadLine: e.HeadLine, Abstract: e.Abstract, ImageLink: e.ImageLink ,UpdatedDate:this.CommonService.getDateFormat(new Date(e.UpdatedDate),'others').toString()};
                            })
                        },
                        error => { console.log(error) });
                        this.Service.getListingNews("state",5).subscribe(
                            data => {
                                this.HomeList3 = data.map(e => {
                                    return { Heading:'state',SectionName:e.ChildName,ArticleId:e.ArticleId, HeadLine: e.HeadLine, Abstract: e.Abstract, ImageLink: e.ImageLink ,UpdatedDate:this.CommonService.getDateFormat(new Date(e.UpdatedDate),'others').toString()};
                                })
                            },
                            error => { console.log(error) });
  }
  getHomeList(name: string) 
  {
    if(name=="0")
    {
      return this.HomeList1;
    }
    else if(name=="1")
    {
      return this.HomeList2;
    }
    else
    {
      return this.HomeList3;
    }
  }

  ngOnInit() {
      this.datetime=this.CommonService.getDateFormat(new Date(),'home').toString();
    this.getListingData('TopNews');
  }

  ngAfterViewInit() {

    jQuery(this.input.nativeElement).endlessRiver({

    });
    $( document ).ready(function() {
        $('.brkngBody').show();
    });
  }
}

home1.module.ts：

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

import { Home1RoutingModule } from './home1-routing.module';
import { Home1ListComponent } from './home1-list/home1-list.component';
import { Home2ListComponent } from '../home2/home2-list/home2-list.component';
import { Home2RoutingModule } from '../home2/home2-routing.module';
import { Home2Module } from '../home2/home2.module';

@NgModule({
  imports: [
    CommonModule,
    Home1RoutingModule,
    Home2ListComponent
  ],
  exports:[
    Home2ListComponent
  ],
  declarations: [Home1ListComponent]
})
export class Home1Module { }

home2.module.ts：

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

import { Home2RoutingModule } from './home2-routing.module';
import { Home2ListComponent } from './home2-list/home2-list.component';

@NgModule({
  imports: [
    CommonModule,
    Home2RoutingModule
  ],
  declarations: [Home2ListComponent]
})
export class Home2Module { }

和home1-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Home1ListComponent } from './home1-list/home1-list.component';

const routes: Routes = [ {
  path: '',
  component: Home1ListComponent
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Home1RoutingModule { }

Demo

Answer 1

尝试以下代码段。

// home2.module.ts：

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

import { Home2RoutingModule } from './home2-routing.module';
import { Home2ListComponent } from './home2-list/home2-list.component';

@NgModule({
  imports: [
    CommonModule,
    Home2RoutingModule
  ],
  exports:[Home2ListComponent],
  declarations: [Home2ListComponent]
})
export class Home2Module { }

// Home1.module.ts

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

import { Home1RoutingModule } from './home1-routing.module';
import { Home1ListComponent } from './home1-list/home1-list.component';
import { Home2ListComponent } from '../home2/home2-list/home2-list.component';
import { Home2RoutingModule } from '../home2/home2-routing.module';
import { Home2Module } from '../home2/home2.module';

@NgModule({
  imports: [
    CommonModule,
    Home1RoutingModule,
    Home2ListComponent
  ],
  exports:[
    Home1ListComponent
  ],
  declarations: [Home1ListComponent]
})
export class Home1Module { }

<强> DEMO

Answer 2

如果您的Home2组件位于不同的模块中，那么您必须将其添加到＆＃34; exports＆＃34;块。然后，只有您才能在Home1模块中使用该组件。

E.g。

第1单元

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

    @NgModule({
      imports: [
        CommonModule
      ],
      declarations: [Home1Component],
      exports: [Home1Component]
    })
    export class Module1 { }

第2单元

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';    
@NgModule({
      imports: [
        CommonModule
      ],
      declarations: [Home2Component],
      exports: [Home2Component]
    })
    export class Module2 { }

AppModule

 @NgModule({
      imports: [
        CommonModule,
        Module1,
        Module2
      ],
      declarations: [],
      exports: []
    })
    export class AppModule { }

Answer 3

当您可视化此错误时，您需要将组件类名称添加到AppModule的@NgModule的“imports”结构中。

例如，如果您的组件类 home1 声明选择器 app-home2-list 。

应用/ home2.component.ts

import { Component} from '@angular/core'; @Component({ selector: 'app-home2-list', templateUrl: 'app/home2.component.html', styleUrls: ['app/mycomponent.css'] }) export class Home2{ // Component code here}

应用/ home1.component.ts

import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; // Add the reference to the component so you can use the seletor // inside the template 'app.component.html' import { Home2} from './home2.component'; if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'app-home1', templateUrl: 'app/home1.component.html', styleUrls: ['app/home1.component.css'] }) export class Home1Component{ // App component code here} @NgModule({ imports: [ BrowserModule, MyComponentModule ], declarations: [Home1Component], bootstrap: [Home1Component, Home2Component]}) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);

如何将延迟加载的Component选择器包含在Angular 2+中的另一个Component的HTML中

3 个答案: