标签: angular7

我正在使用Angular 7编写我的第一个Angular应用程序。

通常，在编写HTML时，我会使用CDN（用于引导程序，字体等）。

通过查看一些教程，他们建议保留默认的“ index.html”作为生成的目录，但这似乎是为标准css，js和字体添加CDN的明显地方。

Angular是否有另一种添加CDN的方法。

我有一个角度为 7 的项目

我有带<a>标签的路由器链接，我有嵌套<a>标签，两者都有routerLink属性，

我面临的问题是，内部<a>路线不起作用

<a [routerLink]="[ './comp1']">
    Comp1
    <a [routerLink]="['./comp2']">
        Navigate to comp2 (Nested)
    </a>
</a>

如果我将它分开，这将起作用

<div>
    <a [routerLink]="['./comp2']">
        Navigate to comp2 (Not Nested)
    </a>
</div>

我也尝试了下面的代码，但仍然相同

<a [routerLink]="[ './comp1']">
    Comp1
    <a [routerLink]="['./comp2']" (click)="$event.preventDefault()>
        Navigate to comp2 (Nested)
    </a>
</a>

将a标签更改为跨度也不能解决问题

<span [routerLink]="[ './comp1']" >
    Comp1
    <span [routerLink]="['./comp2']" (click)="$event.preventDefault()">
        Navigate to comp2 (Nested)
    </span>
</span>

这是它的https://stackblitz.com/edit/angular-nested-router

我一直在使用MSDN博客文章中描述的方法来简化扩展组件，而无需在super()调用中提供所有依赖关系。但是，这已停止在Type 7的Angular 7中工作。

因此，发生的事情是在引导后，我试图将注射器存储在服务中，然后再尝试对其进行检索。

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  // Store module's injector in the AppInjector class
  console.log('Expected #1: storing app injector');
  AppInjector.setInjector(ref.injector);
})

然后在基本组件中提取存储的注射器

export class BaseComponent {
  constructor() {
    console.log('Expected #2: retrieving stored injector');
    const injector = AppInjector.getInjector();
  }
}

但是，从控制台BaseComponent来看，顺序是相反的-首先调用的构造函数，然后在的诺言boostrapModule()得以解决之后。

我不确定在Angular 7中引导程序的行为是否现在有所不同，因为控制台日志提示。以前与Typescript 2一起在Angular 6中使用的解决方案相同，但在版本7中已停止工作。这是基于MSDN文章的已损坏应用程序的堆栈闪电：https ://stackblitz.com/edit/component-inheritance-angular-7

因此，根本的问题是– 如何保证AppInjector.setInjector()之前发生AppInjector.getInjector()？

我正在像这样使用Ionic 4的离子搜索：

     <ion-searchbar
            #searchbarElem
            (ionInput)="getItems($event)"
            (tap)="handleTap($event)"
            [(ngModel)]="keyword"
            (ngModelChange)="updateModel()"
            [cancelButtonText]="options.cancelButtonText == null ? defaultOpts.cancelButtonText : options.cancelButtonText"
            [showCancelButton]="options.showCancelButton == null ? defaultOpts.showCancelButton : options.showCancelButton"
            [debounce]="options.debounce == null ? defaultOpts.debounce : options.debounce"
            [placeholder]="options.placeholder == null ? defaultOpts.placeholder : options.placeholder"
            [autocomplete]="options.autocomplete == null ? defaultOpts.autocomplete : options.autocomplete"
            [autocorrect]="options.autocorrect == null ? defaultOpts.autocorrect : options.autocorrect"
            [spellcheck]="options.spellcheck == null ? defaultOpts.spellcheck : options.spellcheck"
            [type]="options.type == null ? defaultOpts.type : options.type"
            [disabled]="disabled"
            [ngClass]="{'hidden': useIonInput}"
            (ionClear)="clearValue(true)"
            (ionFocus)="onFocus()"
            (ionBlur)="onBlur()"
    >
    </ion-searchbar>

单击时，我从组件内部运行以下命令：

@HostListener('document:click', ['$event'])
private documentClickHandler(event) {
    if ((this.searchbarElem …

我有以下问题。单击以检查堆栈闪电。

我在构造函数中设置了反应形式：

this.formGroup = this.fb.group({
      'family_name_en': new FormControl('', Validators.required),
      'family_name_ar': new FormControl('', [Validators.required, Validators.pattern('[\u0600-\u06FF ]*')]),
      'unit_id': new FormControl({ value: '', disabled: true }, [Validators.required])
});

而且ngOnInti()，我正在获取与关联的数据unit_id。

当我将数据从平台迁移到另一个平台时，不建议使用阿拉伯语的姓氏，但现在是这样。因此，大多数数据将不使用阿拉伯文名称加载。

问题是该按钮始终处于启用状态，而我需要做的是，如果用户要更新此unit_id按钮，则他应该添加阿拉伯语名称，以便随后启用该按钮。

如果表单有效，则启用按钮在加载组件时不会造成伤害。

这是getData()获取数据并设置表单组控件值的方法：

ngOnInit() {
    this.getDataById();
}

getDataById（）：

getDataById() {
    this.showSpinner = true;
    this.auth.getDataById(this.unit_id).subscribe(
      (data) => {
        if (data['info'][0]['total'] == 1) {
          this.noDataBool = false;
          this.showSpinner = false;
          this.family_name_en = data['info'][0]['hh_last_name_en'];
          this.formGroup.controls['family_name_en'].setValue(this.family_name_en);
          this.family_name_ar = data['info'][0]['hh_last_name_ar'];
          this.formGroup.controls['family_name_ar'].setValue(this.family_name_ar);
          this.unit_id = data['info'][0]['unit_id'];
          this.formGroup.controls['unit_id '].setValue(this.unit_id);
    }
} …

因为我更新到angular7,我收到错误？

的package.json

"dependencies": {
            "@angular/animations": "^7.0.3",
            "@angular/common": "^7.0.3",
            "@angular/compiler": "^7.0.3",
            "@angular/core": "^7.0.3",
            "@angular/forms": "^7.0.3",
            "@angular/http": "^7.0.3",
            "@angular/platform-browser": "^7.0.3",
            "@angular/platform-browser-dynamic": "^7.0.3",
            "@angular/platform-server": "^7.0.3",
            "@angular/router": "^7.0.3",
            "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.9",
            "@types/lodash": "^4.14.116",
            "bootstrap": "^4.1.3",
            "core-js": "^2.5.7",
            "font-awesome": "^4.7.0",
            "hammerjs": "^2.0.8",
            "ng-connection-service": "^1.0.4",
            "ngx-perfect-scrollbar": "^6.3.1",
            "ngx-toastr": "^9.1.0",
            "ngx-ui-switch": "^1.6.0",
            "rxjs": "^6.3.3",
            "rxjs-compat": "^6.3.3",
            "web-animations-js": "2.3.1",
            "zone.js": "^0.8.26"
        },
        "devDependencies": {
            "@angular-devkit/build-angular": "^0.10.5",
            "@angular/cdk": "^6.4.7",
            "@angular/cli": "^7.0.5",
            "@angular/compiler-cli": "^7.0.3",
            "@angular/language-service": "^7.0.3",
            "@angular/material": "^6.4.7",
            "@types/jasmine": "^2.8.11",
            "@types/jasminewd2": "~2.0.2",
            "@types/node": "^10.12.6",
            "codelyzer": "^4.5.0",
            "jasmine-core": "^3.3.0",
            "jasmine-spec-reporter": "^4.2.1",
            "karma": …

我正在使用ionic 4 angular7。我正在<ion-reorder>重新排序列表。Drag n Drop第一次可以正常工作，但是当我释放时click，项目卡住了。第一次重新排序后，所有内容都会冻结。而且我无法第二次尝试重新订购。

这是我的.html文件

<ion-list lines="none">
      <ion-reorder-group disabled="false">
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical …

这是我在Angular 7中遇到的问题：

我有两个出口：主应用程序路由器出口和一个名为“ administration”的辅助出口。

当我想在开始时浏览任何管理链接时，它可以正常工作。但是下一次，当我尝试导航时，角度抛出此错误消息：

错误：无法激活已经激活的插座

那么，有人可以解释我为什么吗？我在论坛上找不到任何解决方案...

这是一个堆栈闪电战：https ://stackblitz.com/edit/angular-osnnd4

谢谢大家：）

我使用Angular 7.1.4。我想用下面的代码生成一个新模块；

ng g m order-process

但是我遇到了一个错误：

Invalid rule result: Instance of class Promise.

如何解决这个问题？节点：8.11.3

package.json（https://prnt.sc/o3cg54）

在后台路由Api服务时，不会在路由其他组件时破坏服务。

例如：-您在主页上，并调用了一个将上载大文件的服务，但与此同时，您想使用另一个组件，该服务将在后台运行，并在成功时会发出一些消息。

谢谢 ：）