标签: angular7

Stackblitz 示例链接

我正在使用有角度的材料 - 垫子自动完成内部形式。我想在表单无效时向输入字段显示红色突出显示文本和边框颜色以及 matAutocomplete 输入的 mat-error 消息。对反应式或模板驱动表单的建议将起作用

我在 Angular 7 项目中使用 primeNg 组件。

<p-menu [model]="items" ></p-menu>

在处理此组件时，我们无法访问其内部结构来显示所选的单击菜单项。当选择某个菜单并更改其颜色时推送活动类。

有人对此有任何想法吗？

我想将optional-chainingbabel 插件添加到我的 Angular 7 版本中，但找不到任何有关是否可以.babelrc向我当前项目添加或原理图以修改/添加自定义插件的文档。

每次我提交登录表单时，方法return res;中的Login()代码（见下文）都会执行两次。

第一个响应是一个简单的对象{ type: 0 }，第二个响应是我正在寻找的实际响应。

为什么会return res;被叫两次？我该如何防止这种情况发生？

我已单步执行代码并确认login()仅被调用一次，我的HttpInterceptor仅被调用一次，并且远程请求仅被发送一次。

我上传了这张图片来帮助解释发生了什么。您可以看到仅执行了 1 个远程请求，但已将 2 个响应记录到控制台。

这个问题是几个小时前才开始出现的。我一直在努力让离子服务与 CORS 一起使用，我尝试使用proxy.conf.json但proxy.js无法访问 API，我无法允许访问。出于开发目的，我使用此扩展在 Chrome 中禁用了 CORS ，因为一旦我在移动设备上运行该应用程序，它就不需要 CORS。

我尝试过的其他故障排除：

1. 在 Chrome 中禁用了 Allow-Control-Allow-Origin: * 扩展，问题仍然存在
2. 我从 app.module.ts 中删除了 HttpInterceptor，问题仍然存在
3. 我尝试了不同的远程 URL（甚至是 localhost），但问题仍然存在
4. 关闭 Chrome 并重新启动 PC，问题仍然存在
5. 尝试使用FireFox，问题依然存在
6. 我创建了一个新的 Ionic4 项目并复制/粘贴相同的代码，问题仍然存在
7. 我在另一台机器上尝试使用 Chrome，问题仍然存在

这是我login()在我的方法中订阅的可观察对象onSubmit()：

login(username: string, password: string) {

  const body = …

因此，我按照 update.angular.io 网站上的说明将 Angular 应用程序从 Angular 版本 5.2.5 升级到 7.2.2。

我知道这个更新的 TypeScript 和 Webpack 以及 Angular 应用程序附带的所有其他内容。然而，我的知识不够，无法准确地知道这些东西的版本是强加给我的。

但一切都运行良好——除了这个东西安装的任何版本的 Webpack 都会给我警告。“System.import() 已被弃用，并将很快被删除。请改用 import()。”

所以我将“System.import()”更改为“import()”。

此时，我开始收到错误：“仅当‘--module’标志为‘commonjs’或‘esNext’时才支持动态导入”

我已经用谷歌搜索了警告和错误消息，但我无法弄清楚任何所谓的“解决方案”。除了 Angular 之外，Webpack 显然还用于很多其他事情，而且我无法在 Angular 7.2.2 应用程序中专门找到处理此问题的方法。“解决方案”讨论的是编辑不存在的配置文件，或者看起来根本不像示例中所说的那样。

那么如何消除警告而不导致这些错误呢？为什么我不能像 Webpack 告诉我的那样将“System.import()”更改为“import()”？

非常沮丧。任何帮助，将不胜感激。

我正在尝试从父元素访问子元素内的元素，如以下示例代码：

@Component({
    selector: 'parent',
    template: `<child></child>`
})
export class Parent implements AfterContentInit, AfterViewInit {
    @ViewChildren('element') viewChildren: QueryList<ElementRef>
    @ContentChildren('element', {descendants: true}) contentChildren: QueryList<ElementRef>

    ngAfterContentInit() {
        console.log(this.contentChildren)
    }

    ngAfterViewInit() {
        console.log(this.viewChildren)
    }
}
@Component({
    selector: 'child',
    template: `
        <div #element>Div1</div>
        <div>Div2</div>
        <div #element>Div3</div>
    `
})
export class Child {}

我的实际结果是空数组，但我希望有一个包含Div1和Div3 的数组。我究竟做错了什么？

更新

我真正的问题是：
我有一个组件知道何时在某些元素中附加/删除 css 类。该元素可能位于其自己的组件或其子组件、孙组件中，等等。换句话说，我想要完成的是一种有角度的方式来执行以下操作：

let elements = document.querySelectorAll("div[element]")

我正在动态创建元素，其中一个元素使用@Inject解析为工厂的令牌。

问题在于工厂实例缓存在节点索引上。一旦我的元素从视图中消失并返回，我希望能够调用我的工厂函数；但我不。相反，我得到了这个工厂实例的缓存版本。

如何确保对象从视图中消失后不使用缓存？

基本上，当我的@Component构造函数被调用时，我期望一个全新的服务。不是缓存服务。

@Inject(FORM_GROUP_MANAGER_SERVICE)
private formGroupManagerService: FormGroupManagerServiceImpl

{
    provide: FORM_GROUP_MANAGER_SERVICE,
    useFactory: (structureControlService, createTonicControlFactory, parent) => new FormGroupManagerService(
        structureControlService,
        createTonicControlFactory,
        parent
    ),
    deps: [StructureControlService, FORM_GROUP_MANAGER_SERVICE_CREATE_CONTROL, [new Optional(), FormGroupManagerService]]
},

我使用 @Angular/router 和 Angular 7。

我的目标是在我的页面之一上使用任意数量的（可选）查询参数，特别是在 /pages/components 中

我面临的问题是，每当我在网址栏中输入一些查询参数时，我就会被重定向到一个奇怪的位置。如果存在任何查询参数，此重定向会发生在我的所有页面上。

例子：

• http://localhost:4200/pages/dashboard（工作正常）
• http://localhost:4200/pages/components（工作正常）
• http://localhost:4200/pages/dashboard?hello=55&world=77：不工作。我被重定向到http://localhost:4200/pages/components/lo%3D55&world%3D77

我正在努力理解这个重定向。

看起来第一个查询参数的前 3 个字母被截断，查询字符串的其余部分被转义，并且由于某种原因，我总是以 /pages/components/something 结束，即使我输入的 url 完全是一个不同的页面（也许是因为组件页面是我唯一在 RouterModule 上带有参数的页面？）。

这是我的路由模块：

const appRoutes: Routes = [
  {path: '', component: LoginPageComponent, runGuardsAndResolvers:'always', pathMatch: 'full'},
  {path: 'pages/components', component: ComponentsPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/classes', component: ClassesPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/components/:id', component: ComponentsPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/dashboard', component: DashboardPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/users', component: UserAdminisitrationComponent, runGuardsAndResolvers: 'always', canActivate: [UserRoleGuardService]},
  {path: 'pages/reports', component: ReportsPageComponent, runGuardsAndResolvers: 'always'},
  {path: 'pages/jobs', …

我有一个使用 Angular Material 的 Angular 7 项目。我还在我的输入标签中使用了时间类型（HTML5）

<input type="time">

但我希望它是 24 小时格式（不显示 AM/PM 选项）。我一直在寻找解决方案，但没有一个适合 Angular Material 项目。

我有一个在工具提示中显示一些附加数据的组件。此工具提示将在悬停时显示。

我想测试该工具提示中的数据是否正确，但我要么无法创建悬停事件，要么工具提示在我能够检查它之前就消失了。

it('has correct tooltip data', () => {
    const div = fixture.debugElement.nativeElement.querySelector('div');

    div.dispatchEvent(new MouseEvent('mouseover'), {
      view: window,
      bubbles: true,
      cancelable: true
    });

    fixture.detectChanges();
    const tooltip = fixture.debugElement.nativeElement.querySelector('ngb-tooltip-window');
});

我究竟做错了什么？有没有我可以从中汲取灵感的代码示例？

如果我在浏览器中运行测试，悬停事件将正常工作。（即使使用隔离组件）