首页> 疑难解答

如何在Angular 7 / Typescript中使用变量类名?

withpy 2021-06-19

简介创建一个Angular 7应用程序,我定义了一个用于不同实体的表单组件。为此,我创建了一个变量路由:{path:':entity / create',component:FormComponent}这项工作很棒,但是......

创建一个Angular 7应用程序,我定义了一个用于不同实体的表单组件。

为此,我创建了一个可变路径:

  {path: ':entity/create', component: FormComponent}

这项工作很棒,但根据我想要创建的实体,我必须加载不同的对象。

所以我试图在Angular中使用变量类名实例化一个类。

我试着这样做:

var object = eval('new myObject()');

但我收到此错误消息:

ERROR Error: "Uncaught (in promise): ReferenceError: myObject is not defined
@http://localhost:4200/main.js line 3199 > eval:1:1
./src/app/form/form.component.ts/FormComponent.prototype.ngOnInit/</<@http://localhost:4200/main.js:3199:24
step@http://localhost:4200/vendor.js:120599:18
verb/<@http://localhost:4200/vendor.js:120580:53
__awaiter/<@http://localhost:4200/vendor.js:120573:71
ZoneAwarePromise@http://localhost:4200/polyfills.js:3268:29
__awaiter@http://localhost:4200/vendor.js:120569:12
./src/app/form/form.component.ts/FormComponent.prototype.ngOnInit@http://localhost:4200/main.js:3195:16
checkAndUpdateDirectiveInline@http://localhost:4200/vendor.js:58018:9
checkAndUpdateNodeInline@http://localhost:4200/vendor.js:59282:20
checkAndUpdateNode@http://localhost:4200/vendor.js:59244:16
debugCheckAndUpdateNode@http://localhost:4200/vendor.js:59878:19
debugCheckDirectivesFn@http://localhost:4200/vendor.js:59838:13
View_FormComponent_Host_0/<@ng:///AppModule/FormComponent_Host.ngfactory.js:9:5
debugUpdateDirectives@http://localhost:4200/vendor.js:59830:12
checkAndUpdateView@http://localhost:4200/vendor.js:59226:5
callViewAction@http://localhost:4200/vendor.js:59467:21
execEmbeddedViewsAction@http://localhost:4200/vendor.js:59430:17
checkAndUpdateView@http://localhost:4200/vendor.js:59227:5
callViewAction@http://localhost:4200/vendor.js:59467:21
execComponentViewsAction@http://localhost:4200/vendor.js:59409:13
checkAndUpdateView@http://localhost:4200/vendor.js:59232:5
callWithDebugContext@http://localhost:4200/vendor.js:60096:22
debugCheckAndUpdateView@http://localhost:4200/vendor.js:59798:12
./node_modules/@angular/core/fesm5/core.js/ViewRef_.prototype.detectChanges@http://localhost:4200/vendor.js:57607:13
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick/<@http://localhost:4200/vendor.js:54038:58
./node_modules/@angular/core/fesm5/core.js/ApplicationRef.prototype.tick@http://localhost:4200/vendor.js:54038:13
next/<@http://localhost:4200/vendor.js:53929:99
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:2749:17
onInvoke@http://localhost:4200/vendor.js:53218:24
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:2748:37
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run@http://localhost:4200/polyfills.js:2508:24
./node_modules/@angular/core/fesm5/core.js/NgZone.prototype.run@http://localhost:4200/vendor.js:53132:16
next@http://localhost:4200/vendor.js:53929:69
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.subscribe/schedulerFn<@http://localhost:4200/vendor.js:49434:36
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.__tryOrUnsub@http://localhost:4200/vendor.js:100897:13
./node_modules/rxjs/_esm5/internal/Subscriber.js/SafeSubscriber.prototype.next@http://localhost:4200/vendor.js:100835:17
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype._next@http://localhost:4200/vendor.js:100778:9
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:100755:13
./node_modules/rxjs/_esm5/internal/Subject.js/Subject.prototype.next@http://localhost:4200/vendor.js:100520:25
./node_modules/@angular/core/fesm5/core.js/EventEmitter.prototype.emit@http://localhost:4200/vendor.js:49418:54
checkStable@http://localhost:4200/vendor.js:53187:13
onHasTask@http://localhost:4200/vendor.js:53231:21
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.hasTask@http://localhost:4200/polyfills.js:2801:21
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype._updateTaskCount@http://localhost:4200/polyfills.js:2821:17
./node_modules/zone.js/dist/zone.js/</Zone.prototype._updateTaskCount@http://localhost:4200/polyfills.js:2649:34
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask@http://localhost:4200/polyfills.js:2570:25
drainMicroTaskQueue@http://localhost:4200/polyfills.js:2959:25

有没有办法在Angular 7 / TypeScript中使用变量类名?

我是否正确使用Angular?

0
投票

首先:您需要使用类型为newObject的Object填充您的Variable。相反,你必须用Type newObject填充它。 (转储新的...())

第二:你不能像这样使用路由器。

RoutesModule.forRoot(APP_Routes);

刚刚被召唤一次,之后你无法改变路线。您可以做的是定义更多路线或在末尾定义带变量的路线。例如'/ splitter /:id',splitter是一个基于id返回不同组件的组件。但是使用子组件更容易实现。看到这个:

const adminRoutes: Routes = [
      { path: 'admin', component: AdminComponent,
        children: [
            { path: 'crises', component: ManageCrisesComponent },
            { path: 'heroes', component: ManageHeroesComponent },
            { path: '', component: AdminDashboardComponent }
        ]}
];

(取自Angular Documentation

相关文章

  • Textview没有显示

    我在另一个linearlayout中有一个linearlayout和一个textview。显示内部的linearlayout,但问题是最后的textview不是。为什么?

  • 尽管安装了更新的SDK,但无法更改目标框架

    我正在使用空白应用模板创建跨平台应用。当我尝试编译时,我得到的一些错误都在$(targetframeworkversion)的“xamarin.forms.platform.android.dll(v7.1)”周围...

  • AWS Cloudformation:有条件地创建资源属性

    我知道通过使用条件有条件地(还有什么?)创建资源是可能的。我试图找到一种有条件地创建资源属性的方法;在我的情况下,我......

  • Android OAuth Retrofit访问令牌请求

    任何人都可以告诉确切的格式将下面的代码转换为改造curl -X POST -d“grant_type = password&username = admin&password = admin&scope = read + write”-u“clientId:clientSecret”http:// ...

  • 如何重新加载MVC页面?

    这是一个MVC剃刀页面,在第一次加载时工作正常。如果我使用javascript重新加载甚至刷新浏览器菜单(Chrome),我会在&#39;/&#39;应用程序中收到服务器错误。 &gt;观点&#39;......

  • python类中的条件[关闭]

    我实际上正在处理一个项目,我想在一个类的get方法中插入一个条件。这个条件必须作为最后一句的参数并评估该句子是否返回...