Javascript 角度2+从延迟加载组件访问/更改变量
我想在延迟加载后使用NewDataSet 我尝试添加@Input DataList或private DataList,但没有成功 app.component.html:Javascript 角度2+从延迟加载组件访问/更改变量,javascript,angular,typescript,lazy-loading,Javascript,Angular,Typescript,Lazy Loading,我想在延迟加载后使用NewDataSet 我尝试添加@Input DataList或private DataList,但没有成功 app.component.html: <ul> <li *ngFor="let Data of DataList">{{Data.Name}}></li> </ul> <button (click)='getLazy()'>Lazy Load New DataSet</button>
<ul>
<li *ngFor="let Data of DataList">{{Data.Name}}></li>
</ul>
<button (click)='getLazy()'>Lazy Load New DataSet</button>
请看一看直播版。
我希望这个解决方案能满足您的需要。
app.component.ts
app.module.ts
app.component.html
为什么你只是为了访问一个变量而懒洋洋地加载一个组件?!你们到底想实现什么?实际上,我想延迟加载数据集来改变变量。
import OldDataSet from '../assets/OldDataSet.json';
...
export class AppComponent {
DataList:Array<Object> = OldDataSet;
constructor(
private viewContainerRef: ViewContainerRef,
private cfr: ComponentFactoryResolver
) {}
async getLazy() {
this.viewContainerRef.clear();
const { Lazy1Component } = await import('./lazy1.component');
this.viewContainerRef.createComponent(
this.cfr.resolveComponentFactory(Lazy1Component)
);
}
}
import NewDataSet from '../assets/NewDataSet.json';
...
export class Lazy1Component implements OnInit {
ngOnInit(): void {
this.DataList = NewDataSet
}
}
import {
Component,
ViewChild,
ComponentFactoryResolver,
ViewContainerRef,
Type
} from "@angular/core";
import { PlaceholderDirective } from "./placeholder.directive";
import { DatasetAComponent } from "./dataset-a.component";
import { DatasetBComponent } from "./dataset-b.component";
@Component({
selector: "my-app",
templateUrl: "./app.component.html"
})
export class AppComponent {
hostViewContainerRef: ViewContainerRef;
@ViewChild(PlaceholderDirective, { static: false })
datasetHost: PlaceholderDirective;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {}
onLoadA() {
this.loadNewDataset(DatasetAComponent, "dataset A loaded.");
}
onLoadB() {
this.loadNewDataset(DatasetBComponent, "dataset B loaded.");
}
onClear() {
this.hostViewContainerRef.clear();
}
loadNewDataset(
datasetComponent: Type<DatasetAComponent> | Type<DatasetBComponent>,
message: string
) {
const datasetCmpFactory = this.componentFactoryResolver.resolveComponentFactory(
datasetComponent
);
this.hostViewContainerRef = this.datasetHost.viewContainerRef;
this.hostViewContainerRef.clear();
const componentRef = this.hostViewContainerRef.createComponent(
datasetCmpFactory
);
componentRef.instance.message = message;
}
}
import { Component, Input } from "@angular/core";
import colors from "./data/a.json";
@Component({
templateUrl: "./dataset-a.component.html"
})
export class DatasetAComponent {
@Input() message: string;
dataset = colors;
}
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
import { PlaceholderDirective } from "./placeholder.directive";
import { DatasetAComponent } from "./dataset-a.component";
import { DatasetBComponent } from "./dataset-b.component";
@NgModule({
imports: [BrowserModule, FormsModule],
declarations: [
AppComponent,
PlaceholderDirective,
DatasetAComponent,
DatasetBComponent
],
bootstrap: [AppComponent],
entryComponents: [DatasetAComponent, DatasetBComponent]
})
export class AppModule {}
<h1>using view container ref</h1>
<button (click)="onLoadA()">Dataset A</button> |
<button (click)="onLoadB()">Dataset B</button> |
<button (click)="onClear()">Clear View</button>
<br />
<ng-template appPlaceholder></ng-template>