angular6 相关问题

Angular 6 页面刷新时延迟加载路线导航

我正在研究 Angular 6 延迟加载并遇到问题。 我有一个登录页面，登录后可以在启动应用程序时加载该页面，其中有一个主页具有单个选择下拉列表...

如何自定义Toast窗口的样式？

窗口的默认大小非常小，我希望能够调整它，因为我的吐司消息可能会很长。我还需要能够自定义......的风格

Angular6 创建类似 node_module 的文件夹

我正在尝试在我的项目中创建一个文件夹，在其中可以放置一组 Angular 6 的自定义库，并能够像在 node_module 文件夹中处理库一样导入它们。 导入 { SampleLibModule ...

http-server -p 8080 不服务于我的角度应用程序。而 ng 服务则

这是我打开本地主机时看到的内容 我想用 Angular 制作一个 PWA，所以我按照 angular.io 网站上的说明进行了最小的细节操作，但它没有打开通常的“欢迎...

NullInjectorError：没有 HttpHandler 的提供者！尽管存在 HttpClient/HttpClientModule

我是基于 Angular 的 UI 项目的新手，并使用 vscode 生成了两个新组件以在该项目中使用。然而，每当我将更改推送到 git(bitbucket) 时，我都会不断收到错误，这些......

优化角度代码以获得更好的可扩展性和良好的架构

我有下面的html代码。 （我不打算使用 *ngFor ） 模板1 模板2 我有以下 html 代码。 （我不打算使用 *ngFor ） <div *ngIf = 'showTemplate1'>Template 1</div> <div *ngIf = 'showTemplate2'>Template 2</div> <div *ngIf = 'showTemplate3'>Template 3</div> <div *ngIf = 'showTemplate4'>Template 4</div> <div *ngIf = 'showTemplate5'>Template 5</div> <div *ngIf = 'showTemplate6'>Template 6</div> <div *ngIf = 'showTemplate7'>Template 7</div> <div *ngIf = 'showTemplate8'>Template 8</div> 在我的 TS 文件中，我有以下内容 displayTemplates(){ if( condition1 ){ this.showTemplate1 = true; this.showTemplate2 = true; this.showTemplate3 = true; this.showTemplate4 = true; this.showTemplate5 = true; this.showTemplate6 = true; this.showTemplate7 = false; this.showTemplate8 = false; } else if( condition2 ){ this.showTemplate1 = false; this.showTemplate2 = true; this.showTemplate3 = true; this.showTemplate4 = true; this.showTemplate5 = true; this.showTemplate6 = true; this.showTemplate7 = false; this.showTemplate8 = true; } else if( condition3 ){ this.showTemplate1 = true; this.showTemplate2 = true; this.showTemplate3 = true; this.showTemplate4 = true; this.showTemplate5 = true; this.showTemplate6 = true; this.showTemplate7 = true; this.showTemplate8 = false; } } 正如您在代码中看到的，它看起来像是一个糟糕的代码。 是否有任何其他方法可以使其更加清洁和可扩展。 这是您可以在代码中进行的一些改进 resetToTrue(){ this.showTemplate1 = true; this.showTemplate2 = true; this.showTemplate3 = true; this.showTemplate4 = true; this.showTemplate5 = true; this.showTemplate6 = true; this.showTemplate7 = true; this.showTemplate8 = true; } displayTemplates(){ if(condition1 ){ this.resetToTrue(); this.showTemplate7 = false; this.showTemplate8 = false; } else if( condition2 ){ this.resetToTrue(); this.showTemplate1 = false; this.showTemplate7 = false; } else if( condition3 ){ this.resetToTrue(); this.showTemplate8 = false; } } 用户 this.resetToTrue() 如果大多数字段都是 true，否则您可以创建一个方法 this.resetToFalse()，将所有值设置为 false。 displayTemplates(){ this.resetToTrue(); switch (true) { case condition1: this.showTemplate7 = false; this.showTemplate8 = false; break; case condition2: this.showTemplate1 = false; this.showTemplate7 = false; break; case condition3: this.showTemplate8 = false; break; } }

为什么 Angular 6 会出现“找不到具有未指定名称属性的控件”错误？

我正在为前端编写注册页面，但遇到了错误，即“无法找到具有未指定名称属性的控件”。我相信这表明控制器...

mat-tab 延迟加载选项卡仅一次

我正在使用 Angular Material mat-tab，它设置为延迟加载选项卡内容。 由于默认情况下加载第一个选项卡，我已将第二个选项卡设置为延迟加载。 我看到当我在...之间导航时

Angular 6：如何将 JSON 字符串添加到现有的 JSON 字符串数组？

所以我有一个 Typescript 组件，其构造函数如下所示： 构造函数（私有http：HttpClient）{ this.http.get('/api/values/users').subscribe(结果 => { this.values =

如何在 Angular 6 中的组件模板中渲染超链接？

我有一个 Angular 6 应用程序，其中使用组件在页面上显示消息。有些消息包含嵌入其中的超链接（在 HTML 标记中）。然而，当消息

角度构建需要太多时间

我使用的是 Angular 6.7。这是财务应用程序。有超过80个模块。当我使用以下命令进行构建时 节点 --max_old_space_size=16384 ./node_modules/@angular/cli/bin/ng

使用令牌生成链接

在 Angular 6 中，我想从 URL 检索 JWT 令牌，将其转换为 Base 64 并将其推送到其他一些链接。 我这样做了： 应用程序路由.module.ts： { 路径：'admin/：token'，redirectTo：'广告...

在 Angular 6 中生成没有 *.spec.ts 的组件

在之前的版本中，可以使用 .angular-cli.json 禁用spec.ts，如下所示。 有没有办法用 6.0.0 版本中的 angular.json 来做到这一点？ “默认”：{ “成分”： { “规格”：假...

选择“所有垫子”选项并取消选择“全部”

我有如下场景： 我想要实现的是： 当用户单击“全部”时，将选择所有选项，当用户再次单击“全部”时，将取消选择所有选项。 如果选中所有选项...

使用rest api进行语言翻译而不是Angular6中的i18n

我需要多语言应用程序，其中有一些动态数据。我可以使用 ngx-translate 翻译数据，但这只会改变前端，但对于动态数据，我需要......

Angular 双列表更改滚动条轨道颜色

我正在使用 AngularDualListBoxModule： 从 'Angular-dual-listbox' 导入 { AngularDualListBoxModule }； 我想将滚动条颜色从蓝色更改为绿色（上图）。 实际双L...

Anuglar 6 数据库路线

我正在使用默认路由配置开发 Angular 6 应用程序， 我的问题是如何在用户登录后从数据库加载路线，这就是我的路线现在的样子。 常量路线：路线= [ ...

Mat-Tab-Group 在单击之前不会加载

所以我的角度项目遇到了问题。当应用程序首次加载时，选项卡不会显示。但是，一旦我单击该应用程序，选项卡就可以正常工作。 相关...

如何检查表单中是否存在控件

下面是我从服务获取响应的代码。在这里，我得到了一份员工名单。 我需要根据服务的响应动态绑定表单控件。不过，我的服务是回报...

Angular 6 - 如何在 ngComponentOutlet 中传递数据

我是 Angular 6 的新手。 我在 for 循环中使用 ngComponentOutlet 我想知道如何将数据传递给我的子组件 我的 HTML 我是 Angular 6 的新手。 我在 for 循环中使用 ngComponentOutlet 我想知道如何将数据传递给我的子组件 我的 HTML <div *ngFor="let item of items"> <ng-container *ngComponentOutlet="currentComponent"></ng-container> </div> 我的父组件决定选择哪个组件 export class MyParentComponent implements OnInit { constructor(private route: ActivatedRoute, private commonService: CommonService) { } dynamicComponents = { 'firstchild': { '1': FirstchildComponent } }; currentComponent: any; items: any; ngOnInit() { // To get data from resolver const routeResult = this.route.snapshot.data.data.result; this.items = routeResult.items; // select child component at basis of route const routeParams = this.route.snapshot.params; this.currentComponent = this.dynamicComponents[routeParams.pageName][routeParams.templateType]; } } 我的子组件 export class FirstchildComponent implements OnInit { @Input() magazineData: any[]; constructor() { } ngOnInit() { } } 所以我想将项目（循环的单个项目）传递给FirstchildComponent作为输入 我该怎么做？ 我已经检查过注射器 但是由于我是新人，我不太明白注射器是如何工作的 正如您已经指出的，您需要使用注入器，它将提供所有必要的依赖数据。 ###我的父组件 @Component({...}) export class MyParentComponent { constructor(private inj: Injector) {} createInjector(item){ let injector = Injector.create([ { provide: Item, useValue: item } ], this.inj); return injector; } } ###物品类别 如果没有，您将拥有 Item 的课程，然后创建具有所有属性的新课程 - @Injectable() export class Item{ ... } html <div *ngFor="let item of items"> <ng-container *ngComponentOutlet="currentComponent; injector:createInjector(item)"></ng-container> </div> ###动态组件 export class FirstchildComponent implements OnInit { @Input() magazineData: any[]; constructor() { } ngOnInit(private item : Item) { //<-- item content is here. } } 注意：代码是直接在 stackoverflow 编辑器上编写的，因此可能存在拼写错误和语法错误。请自行更正。 ViewContainerRef、ComponentFactoryResolver 在创建动态组件时比 ngComponentOutlet 更容易。 动态组件 模板 - <div #dynamicComponent></div> TS - @ViewChild('dynamicComponent', { read: ViewContainerRef }) podViewContainerRef; constructor(private resolver: ComponentFactoryResolver) { } ngAfterViewInit() { let componentFactory; let componentRef; try { componentFactory = this.resolver.resolveComponentFactory(pod.component); componentRef = this.podViewContainerRef.createComponent(componentFactory); componentRef.instance.podInfo = this.podInfo; } catch (e) { console.log(e); } }