- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
"-6ren"> "-以下起点: 我们有一些 Angular 前端微服务,现在我们想将它们整合到一个应用程序中。我们正在尝试 Angular-Elements 方法,我们已经导出了一个产生巨大 JS 文件的微服务。 问题 -6ren">
以下起点:
我们有一些 Angular 前端微服务,现在我们想将它们整合到一个应用程序中。我们正在尝试 Angular-Elements 方法,我们已经导出了一个产生巨大 JS 文件的微服务。
问题
当我们在“bring it together”项目中包含 angular 元素时,dom 中只有“router-outlet”标签,但不会呈现 html。
代码
自定义元素:
应用程序模块.ts:
import {NgModule, Injector} from '@angular/core';
import {AppRoutingModule} from './app-routing.module';
import {AppComponent} from './app.component';
import {PhoneModule} from "./features/phone/phone.module";
import {createCustomElement} from '@angular/elements';
import {Router} from '@angular/router';
@NgModule({
declarations: [
AppComponent,
],
imports: [
AppRoutingModule,
PhoneModule,
],
entryComponents: [AppComponent],
})
export class AppModule {
constructor(private injector: Injector, private router: Router) {
this.router = router;
}
ngOnInit() {
this.router.initialNavigation();
}
ngDoBootstrap() {
const customElement = createCustomElement(AppComponent, {injector: this.injector});
customElements.define('phone-contracts', customElement);
}
}
应用程序路由.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PhoneListComponent } from './features/phone/phone-list/phone-list.component';
import {PhoneContractDetailsComponent} from "./features/phone/phone-contract-details/phone-contract-details.component";
const routes: Routes = [
{ path: '', redirectTo: 'phone-list', pathMatch: 'full' },
{ path: '', component: PhoneListComponent,},
{ path: 'phone-list/:id', component: PhoneContractDetailsComponent },
{ path: '**', redirectTo: '/phone-list', pathMatch: 'full'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
整合项目:这些来自应该处理此特定微服务的组件
电话契约(Contract).component.html:
<p>
phone-contracts works!
</p>
<phone-contracts>
<app-phone-list>
</app-phone-list>
</phone-contracts>
应用程序模块.ts:
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { FooComponent } from './foo/foo.component';
import { HttpClientModule } from '@angular/common/http';
import { CookieService } from 'ngx-cookie-service';
import { AppRoutingModule } from './app-routing.module';
import { AppService } from './app.service';
import { PhoneContractsComponent } from './phone-contracts/phone-contracts.component';
import { DeviceListComponent } from './device-list/device-list.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
FooComponent,
PhoneContractsComponent,
DeviceListComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpClientModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [CookieService,AppService],
bootstrap: [AppComponent]
})
export class AppModule { }
可能重要的东西?
我们将其用作我们的“构建器”:“@angular-devkit/build-angular:browser”,
我们认为问题在于自定义元素无法解析路由,因此什么也不显示,这是真的吗?
最佳答案
这是你的路由列表应该是这样的:
const routes: Routes = [
{
path: 'phone-list',
component: PhoneListComponent
},
{
path: 'phone-list/:id',
component: PhoneContractDetailsComponent
},
{
path: '**',
redirectTo: 'phone-list',
pathMatch: 'full'
}
];
除此之外,您还没有实际指定路由器导出元素的位置。如果它显示为 html,那么您可能没有关闭它的父标签和/或它没有被用于 Angular 组件。
关于Angular Element 不解析另一个 Angular 项目中的路由(?),网站上只显示 "<router-outlet></router-outlet>",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55650726/
大家好,我是 iOS 编程的新手。 我知道什么是强引用和弱引用。但是当我必须处理网点时,我很困惑应该使用哪种类型的引用。在阅读了说明 的文档之后 Outlets should generally be
作为希望迁移完整应用程序的第一步,我正在将应用程序的一部分迁移到 Ember。这是一个 Rails 应用程序,我正处于概念验证阶段。在我的 Rails View (index2.html.erb) 中
我正在通过 xib 实例化商店: let cShop = UINib(nibName: "connectedShop", bundle: nil).instantiateWithOwner(nil,
我正在使用 akka Streams graphDSL 创建一个可运行的图。流组件的入口/导出不存在编译时错误。运行时抛出以下错误: 有什么想法我应该验证什么才能使其运行吗? requirement
我收到错误: 'router-outlet' is not a known element: 1. If 'router-outlet' is an Angular component, th
我试图了解 View Controller 的生命周期,但我读到了一些关于 awakeFromNib 的相互矛盾的陈述。文档说所有 socket 都应该在 awakeFromNib 中设置,但是 I
我创建了 UITableViewController 的子类,然后将其设置为 UIStoryboard 中的 View 。 问题是启动应用程序时屏幕变黑,我认为这可能是因为 View 的 View o
以下起点: 我们有一些 Angular 前端微服务,现在我们想将它们整合到一个应用程序中。我们正在尝试 Angular-Elements 方法,我们已经导出了一个产生巨大 JS 文件的微服务。 问题
我知道 IBOutlet 是一个编译器指令,指示以下变量声明充当到其他对象的连接点。 Inspector 窗口中的 2 个术语可能会让初学者感到困惑。它们看起来像 2 种奥特莱斯。但它们可能意味着成为
我定义了一个连接到 Storyboard的UITableViewController,如下所示: class systemwhereFilterCtrl: UIViewController, UITa
我无法连接到文件的所有者 XIB。应用程序类型是通用的。在“引用网点”的文件所有者中,只有“新引用网点”,而在“引用网点集合”下,只有“新引用网点集合”。不可能将 UIImageView 的 IBOu
我在嵌套的路由器导出中有一个组件,但想创建一个指向父路由器导出中的路由的链接。我不确定你们想要我解释什么代码? 最佳答案 我无法从模板中做到这一点(也许看到这个答案有人可以告诉我从模板中做到这一点的方
我在 Xib 中引用了 UITextfields 的 Outlet Collection,排列如下。当我打印Referencing Outlet Collection时,我发现它是无序的。我需要自动排
如果我们在组件(任何组件)中使用 ,然后将 routerLink 放在该组件内的另一个组件上,链接是否总是呈现链接到当前事件组件的 中的组件? 换句话说,组件 routerLink 属性是否总是与
我有 2 个嵌套资源,在 Ember 路由器中发布和评论。我希望这能反射(reflect)网址:/posts/1/comments/1去这个页面应该, 使用帖子/索引模板呈现 id = 1 的帖子。
是否可以举起 Outlet[A]进入 FlowOps[A, _] ?那就是如果我有这个: import akka.NotUsed import akka.stream.Outlet import ak
当我尝试使用函数从其父 View Controller 更新容器 View 内容时。 更新初始 ViewDidLoad 集后。应用程序崩溃。好像所有的Outlet都变成了零 最佳答案 您需要在容器 V
我正在尝试更新我的应用程序以使用新的 v3 路由器,而不是 Angular 团队刚刚宣布的 http://angularjs.blogspot.com.au/2016/06/improvements-
我已经为几个按钮创建了一个 socket 集合,现在我需要更改按钮的背景,这是我的代码,但编译器给了我一个错误: [outlet makeObjectsPerformSelector:@selecto
我在 Xcode (Xcode 11.0) 上创建了一个项目,但出于某种原因,它不允许我从 Main.storyboard 添加导出: 图片显示它只让我添加 Action ,没有 socket 。有人
我是一名优秀的程序员,十分优秀!