标签: angular9

Angular 工作区允许我将多个项目添加到单一存储库中，这很棒。然而，在与多个团队合作时，我注意到，如果您只有一个 package.json 并且让每个团队使用他们正在编写的应用程序对其进行编辑，那么事情可能会变得非常混乱。

可以有这样的结构吗？

|\xe2\x94\x80\xe2\x94\x80 angular.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 browserslist\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 e2e\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 karma.conf.js\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 node_modules\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json <--- I should only be responsible for everything in /src\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package-lock.json\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 projects\n\xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 my-sub-application\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 browserslist\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 karma.conf.js\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 package.json <--- Is this possible? So that "my-sub-application" only pulls its dependencies from this package.json?\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 src\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 environments\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 favicon.ico\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 index.html\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 polyfills.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 styles.scss\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x82\xc2\xa0\xc2\xa0 \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 test.ts\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 tsconfig.app.json\n\xe2\x94\x82\xc2\xa0\xc2\xa0     \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 …

我正在尝试在布尔值上使用 ngif 显示元素，如下所示：

<li *ngIf="!include == true">
    <span class="badge badge-pill badge-danger">
        <i [ngClass]="hearthClass"></i>
    </span>
</li>

我的 include var il 初始化为 false 并像这样切换状态：

this.localStorageService.getCurrentUser().then((res) => {
      this.userProfile = res;
       if(this.song.likes.includes(this.userProfile._id)){
         this.include = true
       }
      this.classHeart();
    });

谢谢大家 ！

从 Angular 8 更新到 Angular 9 导致循环依赖错误

我刚刚升级到 Angular 9，并且修复了所有编译错误。现在我收到一个与循环依赖相关的错误，但我无法追踪该错误。

Error: Cannot instantiate cyclic dependency! ApplicationRef\nat throwCyclicDependencyError (core.js:8072)\nat R3Injector.hydrate (core.js:17049)\nat R3Injector.get (core.js:16803)\nat injectInjectorOnly (core.js:940)\nat \xc9\xb5\xc9\xb5inject (core.js:950)\nat Object.NgbModalStack_Factory [as factory] (ng-bootstrap.js:6262)\nat R3Injector.hydrate (core.js:17053)\nat R3Injector.get (core.js:16803)\nat injectInjectorOnly (core.js:940)\nat Module.\xc9\xb5\xc9\xb5inject (core.js:950)\n

如果我查看 ng-bootstrap.js:6262 代码块，它看起来像是指的是 NgbModal 组件

    NgbModalStack.\xc9\xb5prov = \xc9\xb5\xc9\xb5defineInjectable({ factory: function NgbModalStack_Factory() { return new NgbModalStack(\xc9\xb5\xc9\xb5inject(ApplicationRef), \xc9\xb5\xc9\xb5inject(INJECTOR), \xc9\xb5\xc9\xb5inject(DOCUMENT), \xc9\xb5\xc9\xb5inject(ScrollBar), \xc9\xb5\xc9\xb5inject(RendererFactory2), \xc9\xb5\xc9\xb5inject(NgZone)); }, token: NgbModalStack, providedIn: "root" });\nNgbModalStack = __decorate([ __param(2, Inject(DOCUMENT))\n], NgbModalStack);\n

这可能与特定错误没有直接关系，但我看不到任何可能导致此错误的内容。\n任何人都知道可能导致此错误的原因或者它可能是 Angular Bootstrap 库中的错误吗？

在我们的项目中，我们使用了角材料进行开发。我们使用 ::ng-deep覆盖了角度材质样式来自定义 CSS 属性。

使用 ::ng-deep 时，声纳报告中出现“意外的未知伪元素选择器 ::ng-deep”错误。

在 ::ng-deep 团队尝试使用父类（ mat-input-underline.mat-form-field-underline ）和使用 customstyle.scss 文件覆盖属性，但它没有按预期工作。

只是想知道这个问题是否有任何替代解决方案，或者我们是否应该在声纳指标中跳过此规则。有人请就此提出建议吗？

参考

用什么来代替 ::ng-deep

对于Angular 8到9的更新，我是按照官方文档进行升级的。

这建议首先更新到最新版本的 Angular 8，例如：

ng update @angular/core@8 @angular/cli@8

但是，我收到三个警告（全部相同）：

npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"12.16.1","npm":"6.13.4"})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\watchpack\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN ngx-multi-window@0.3.2 requires a peer of @angular/common@^6.0.0-rc.0 || ^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-multi-window@0.3.2 requires …

我想使用 Prime NG 在鹅毛笔编辑器中设置自定义字体大小。我正在使用 Angular 9.1。我将我的应用程序从 Angular 5 升级到 Angular 9。在 Angular 5 中它工作正常，但升级到 Angular9 后它停止工作。

这是我在 html 代码中所做的：

 <p-editor  id="id" [maxlength]="maxLength" (onTextChange)="sample($event)"
                  spellcheck="true">
            <p-header>
                <span class="ql-formats">
                <select class="ql-size">
                                 <option value="8px">small</option>
                                 <option value="9px">9</option>
                                 <option value="10px">10</option>
                                 <option value="12px">12</option>
                                 <option value="14px">14</option>
                                 <option value="16px">16</option>
                                 <option value="18px">18</option>
                                 <option value="20px">20</option>
                                 <option value="22px">22</option>
                                 <option value="24px">24</option>
                                 <option value="26px">26</option>
                                 <option value="28px">28</option>
                                 <option value="36px">36</option>
                                 <option value="48px">48</option>
                                 <option value="72px">72</option>
                </select>
                    </span>
                <span class="ql-formats">
           <button  class="ql-bold q1-box first" aria-label="Bold" title="Bold"></button>
           <button class="ql-italic q1-box" aria-label="Italic" title="Italic"></button>
           <button class="ql-underline q1-box" aria-label="Underline" …

我只想在状态==“完成”时在表上显示数据。我尝试做，但我所做的只是删除状态，但它仍然显示该行。这个怎么做？

数据

    { 
        equipmentOrdered: 'laptop', 
        qty: 1,
        status: 'processing', 
    },
    { 
        equipmentOrdered: desktop, 
        qty: 2,
        status: 'done', 
    },
    { 
        equipmentOrdered: 'keyboard', 
        qty: 2,
        status: 'processing', 
    },

桌子

      <ng-container matColumnDef="equipmentOrdered"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>Equipment Ordered</mat-header-cell>
        <mat-cell *matCellDef="let purchaseOrder">{{purchaseOrder.equipmentOrdered}}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="qty"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>QTY</mat-header-cell>
        <mat-cell *matCellDef="let purchaseOrder">{{purchaseOrder.qty}}</mat-cell>
      </ng-container>

      //this is just not displaying the status, how to not include whole row?
      <ng-container matColumnDef="status"> 
        <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
          <mat-cell *matCellDef="let purchaseOrder">
            <ng-container *ngIf="purchaseOrder.status !='done' ">
            {{purchaseOrder.status}}
          </ng-container>
          </mat-cell>
      </ng-container>


      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; …

我有一个关于嵌套路由器出口的问题。我有三个路由器出口，其中两个已命名。

第二个路由器出口嵌套在主路由器出口内。第三个路由器出口嵌套在第二个路由器出口内。

所有路由器出口都通过不同的模块分开。但是，当我尝试导航以激活第三个路由器出口时，我总是收到一条错误消息，指出该路由不存在。

我在 stackblitz 上创建了一个示例：示例链接

第二个路由器出口工作得很好，正如您在“概述”路由中看到的那样。“命令选项”路线出现问题。初始路线工作正常，但当您单击“权限”时，会显示错误。

我的项目是 Angular 6，它有以下代码行

const crypto = require('crypto-js');
const Buffer = require('buffer').Buffer;
const decrypt = new Buffer(data.result.encr, 'base64');
const privatekey = Buffer.from(data.result.pk, 'base64');
this.decrypted = crypto.privateDecrypt(privatekey, decrypt).toString('utf-8');
return this.decrypted;

效果很好。

现在我将代码迁移到 Angular 9。我发现cryptoNPM 不再支持它

https://www.npmjs.com/package/crypto

它说我必须使用加密的内置库。但我不知道如何使用它。

我以为crypto-js会帮助我。但事实并非如此。

如果有人知道如何crypto在 Angular 9 中使用或如何转换上行，crypto-js那就太好了。

注意：加密仅在服务器端使用 crypto 进行，因为它们有 NodeJS。

提前致谢。

我正在使用角度材质对话框组件代码，并希望在打开/关闭持续时间上添加向右滑动的动画。

openDialog() {
    this.dialog.open(DialogContentExampleDialog);
}

谢谢