时间戳

首页 > 解决方案 > 将 Angular 7 升级到 10 后，Angular DOM 操作中断

angular - 将 Angular 7 升级到 10 后，Angular DOM 操作中断

问题描述

我将工作中的电子角度项目从 Angular 7 更新到 Angular 10，更新了所有依赖项，并运行了该项目。

我有两个组件具有完全相同的 HTML 父组件。我注意到的是，在导航到第二个组件之后，它只会在导航之前找到前一个组件的 DOM 父元素。这不好，因为我正在尝试动态更新特定的 DOM 元素。

例如，在组件 1 中，父元素是<div _ngcontent-bsf-c106="" class="ph-header">...</div>

对于组件 2：<div _ngcontent-bsf-c105="" class="ph-header">...</div>

如图所示，这两个元素之间的唯一区别是属性_ngcontent-bsf-c10x。这是由 Angular 通过ViewEncapsulation为两个组件自动生成的。我使用 Angular routerLink 路由到组件 2。

      <a routerLink="/createtask" class="ph-sidebar-item"><i class="fal fa fa-plus"></i></a>

在组件 2 中，我运行一个简单的控制台日志来获取元素。

        console.log(document.getElementsByClassName('ph-header')[0])

预期结果：

<div _ngcontent-bsf-c105="" class="ph-header">...</div>

实际结果：

<div _ngcontent-bsf-c106="" class="ph-header">...</div>

我不确定这是路由问题还是其他问题，因为我的项目在升级到 Angular 10 之前正在运行。

但是，我确实必须对我的 app.routing.ts 进行更改以满足类型错误。

前：

 export const routing : ModuleWithProviders = RouterModule.forRoot(appRoutes, {useHash: true});

后：

 export const routing : ModuleWithProviders<any> = RouterModule.forRoot(appRoutes, {useHash: true});

组件 1 HTML：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

</head>

<body id="main-body">
  <div class="ph-page">
    <div class="ph-sidebar">
  <div class="ph-sidebar-icon">
    <img src="assets/img/logo.png">
  </div>

  <a routerLink="/dashboard" class="ph-sidebar-item"><i class="fal fa-chart-line"></i></a>
  <a routerLink="/createtask" class="ph-sidebar-item"><i class="fal fa fa-plus"></i></a>
  <a routerLink="/profiles" class="ph-sidebar-item"><i class="fal fa-credit-card"></i></a>
  <a routerLink="/captcha" class="ph-sidebar-item"><i class="fab fa-google"></i></a>
  <a routerLink="/proxies" class="ph-sidebar-item"><i class="fal fa-heart-rate"></i></a>
  <a routerLink="/logs" class="ph-sidebar-item"><i class="fal fa-clock"></i></a>
  <a routerLink="/sales" class="ph-sidebar-item ph-selected"><i class="fal fa-money-check-edit-alt"></i></a>
  <a routerLink="/settings" class="ph-sidebar-item"><i class="fal fa-cog"></i></a>
</div>
          <div class="ph-page-content">
      <div class="ph-header">
        <img src="https://img.icons8.com/ios-glyphs/120/000000/user--v1.png" id="discord-avatar" alt="avatar" class="ph-avatar">
        <div class="ph-icon-large ph-fade" id="bell" style="cursor: pointer;" (click)="changeNotifStatus();"><i class="far fa-bell-slash"></i></div>
        <div class="ph-bubble-group">
          <div class="ph-bulb ph-bulb-green ph-bulb-large"></div>
          <div id="task-number">0 tasks</div>
          <div class="ph-bulb ph-bulb-yellow ph-bulb-large"></div>
          <div id="proxy-number">0 proxies</div>
          <div class="ph-bulb ph-bulb-large"></div>
          <div id="task-proxy-ratio">0:0 ratio</div>
        </div>
        <th style="margin-left: auto;">Dashboard</th>
      </div>
  </div>
</body>

</html>

组件 2 HTML：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
</head>

<body>
  <div class="ph-page">
    <div class="ph-sidebar">
      <div class="ph-sidebar-icon">
        <img src="assets/img/logo.png">
      </div>

      <a routerLink="/dashboard" class="ph-sidebar-item"><i class="fal fa-chart-line"></i></a>
      <a routerLink="/createtask" class="ph-sidebar-item"><i class="fal fa fa-plus"></i></a>
      <a routerLink="/profiles" class="ph-sidebar-item"><i class="fal fa-credit-card"></i></a>
      <a routerLink="/captcha" class="ph-sidebar-item"><i class="fab fa-google"></i></a>
      <a routerLink="/proxies" class="ph-sidebar-item"><i class="fal fa-heart-rate"></i></a>
      <a routerLink="/logs" class="ph-sidebar-item"><i class="fal fa-clock"></i></a>
      <a routerLink="/sales" class="ph-sidebar-item ph-selected"><i class="fal fa-money-check-edit-alt"></i></a>
      <a routerLink="/settings" class="ph-sidebar-item"><i class="fal fa-cog"></i></a>
    </div>

    <div class="ph-page-content">
      <div class="ph-header">
        <img src="https://img.icons8.com/ios-glyphs/120/000000/user--v1.png" id="discord-avatar" alt="avatar" class="ph-avatar">
        <div class="ph-icon-large ph-fade" id="bell" style="cursor: pointer;" (click)="changeNotifStatus();"><i class="far fa-bell-slash"></i></div>
        <div class="ph-bubble-group">
          <div class="ph-bulb ph-bulb-green ph-bulb-large"></div>
          <div id="task-number">0 tasks</div>
          <div class="ph-bulb ph-bulb-yellow ph-bulb-large"></div>
          <div id="proxy-number">0 proxies</div>
          <div class="ph-bulb ph-bulb-large"></div>
          <div id="task-proxy-ratio">0:0 ratio</div>
        </div>
        <th style="margin-left: auto;">Sales Center</th>
      </div>

      <div style="display: grid; grid-template-columns: 2fr 2fr; grid-gap: 2rem; height: 90%;">
        <div class="ph-block-fade" style="height: 100%;">
          <div class="ph-well" id="ph-well" style="height: 100%;">
          <div class="ph-well-stack" id="ph-well-stack">
            <div class="ph-well" id="ph-well-1" style="cursor: pointer;" onclick="Window.createTaskComponent.profileClick(this)" value="1">
              <div style="display: grid; grid-template-columns: 2fr 3fr; grid-gap: 2rem; height: 100%;">
                <div style="position: relative;">
                  <img src="assets/img/amazon.png" style="width: 100%; height: 60%; border-radius: 1rem; border: 6px outset #18181d;">
                  <div class="ph-status-card-icon ph-red" style="position: absolute; bottom: 0;">
                    <i class="far fa-times-circle" style="font-size: 2rem;"><span><th style="font-size: 1rem;"><br>Logged In</th></span></i>
                    
                  </div>
                </div>
                <div style="display: flex; flex-direction: column;">
                  <div class="ph-form-label" style="text-align: center; margin-bottom: 1rem;" translate>Amazon Seller Central</div>
                  <div class="ph-form-label" translate>Account</div>
                  <div class="ph-form-group-h">
                    <div>
                      <input type="text" class="ph-input" placeholder="Username" id="account-input">
                    </div>
                    <div>
                      <input type="text" class="ph-input" placeholder="Password" id="account-input">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
        <div class="ph-block" style="height: 60%;">
          <div class="ph-well" id="ph-well" style="height: 100%;">
          <div class="ph-well-stack" id="ph-well-stack">
            <div class="chart-wrapper"></div>
            </div>
          </div>
        </div>
        </div>
      </div>

  </div>
</body>

</html>

组件 2 TS：

    import {
    Component,
    OnInit,
    NgZone,
    OnDestroy
} from '@angular/core';

@Component({
    selector: 'app-component2',
    templateUrl: './component2.component.html',
    styleUrls: ['./component2.component.css']
})
export class DashboardComponent implements OnInit {
    
    constructor() {
        Window["dashboardComponent"] = this;
    }

    ngOnInit() {
    console.log(document.getElementsByClassName('ph-header')[0])

    }
}

标签： angulartypescriptelectron

解决方案

推荐阅读