如何将延迟加载的组件选择器包含到 Angular 中另一个组件的 HTML 2+
How to include a lazy-loaded Component selector into another Component's HTML in Angular 2+
我正在尝试在 angular 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 { }
尝试以下代码片段。
//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 { }
如果您的 Home2 组件在不同的模块中,那么您必须将其添加到 "exports" 块中。
然后只有您才能在 Home1 模块中使用该组件。
例如
模块 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 { }
当您可视化此错误时,您需要将组件 class 名称添加到 AppModule 的 @NgModule 的“imports”结构中。
例如,如果组件 class home1 声明选择器 app-home2-list.
app/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}
app/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);
我正在尝试在 angular 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 { }
尝试以下代码片段。
//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 { }
如果您的 Home2 组件在不同的模块中,那么您必须将其添加到 "exports" 块中。 然后只有您才能在 Home1 模块中使用该组件。
例如
模块 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 { }
当您可视化此错误时,您需要将组件 class 名称添加到 AppModule 的 @NgModule 的“imports”结构中。
例如,如果组件 class home1 声明选择器 app-home2-list.
app/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}
app/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);