标签: 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 = …

我最近将我的应用程序升级到了 angular 7。我正在尝试使用特定环境运行我的 ng e2e 测试。此外，我不希望每次为应用程序运行 e2e 测试时都运行新服务器。

使用 angular 5 时，我曾经使用 CLI 按照以下方式进行操作：

ng e2e -e test --config protractor.conf.test.js --no-serve

我的测试环境在 environment.test.ts 文件中设置，量角器配置（baseURL 和无头浏览器）在 protractor.conf.test.js 文件中设置。每次运行 e2e 测试时，我都使用 no-serve 标志停止运行新服务器。

对于 angular 7，我在 angular.json 文件中进行了以下更改：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "sample-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": ["src/assets", "src/favicon.ico"],
            "styles": ["src/styles.css"],
            "scripts": []
          },
          "configurations": …

因此，我按照 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]")

我有一个使用 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');
});

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

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

我只是好奇当我们在当前页面中使用 router.navigate 时会调用哪些生命周期钩子，比如说重新加载页面。

constructor(private router: Router) { }
reload () {
    this.router.navigate(['/currentpage']);
}