标签: angular10

我想在 TAG Body 的两个类别（浅色和深色）之间切换。

我做了什么？我创建了一个服务：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ThemeService {
  body = document.body;

  constructor() { }

  changeLight() {
    this.body.classList.replace('light', 'dark');
  }

  changeDark() {
    this.body.classList.replace('dark', 'light');
  }
}

它按预期工作，但我知道这段代码没有使用最佳实践。
在这两个类之间进行更改的正确方法是什么？

我有一个带有延迟加载模块和路由的普通 Angular 10 应用程序。但是，我有一个特殊的要求需要满足。

在大多数页面上，我想通过<app-root>在 index.html 中嵌入元素来使用路由等初始化完整的应用程序——这是AppComponent. 另一方面，在某些页面上，不应该初始化完整的应用程序，而应该只初始化一个<header-search>我使用 @angular/elements（Web 组件）注册的特定组件。这也意味着在这种情况下，除了<header-search>初始化（如果它不是由<header-search>组件本身嵌入）之外，不应该发生路由，也不应该发生任何其他组件。

旁注只是为了让您了解用例的背景：在我正在构建的项目中，并非所有部分都与 Angular 解耦。一些页面使用 Twig/PHP 在后端呈现。但是我需要使用 Angular 构建的标题中的搜索功能也可以在这些页面上使用。这意味着我不会同时拥有完整的应用程序，只有HeaderSearchComponent在这种情况下。然而，在其他页面上，完整的应用程序将被初始化，包括HeaderSearchComponet，因此不需要使用 Web 组件单独嵌入 - 在这种情况下， <app-root>元素就足够了。

我的想法在哪里使用角度元素将HeaderSearchComponent作为<header-search>自定义 Web 组件注册，例如：

@NgModule({
  imports: [BrowserModule, FormsModule, SharedModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  entryComponents: [HeaderSearchComponent]
})
export class AppModule implements DoBootstrap {
  constructor(injector: Injector) {
    const webComponent = createCustomElement(HeaderSearchComponent, {
      injector
    });
    customElements.define("header-search", webComponent);
  }

  public ngDoBootstrap(): void {}
} …

在我的图书馆中，我有一个带有以下代码的服务：

import { Inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DataInjectorModule } from '../../data-injector.module';

// @dynamic
@Injectable()
export class RemoteDataService<T> {
  @Inject('env') private environment: any = {};
  public type: new () => T;
  
  constructor(
    model: T,
  ) {
    this.http = DataInjectorModule.InjectorInstance.get(HttpClient);
  }

  // ...
}

（现有原因data-injector.module只是避免循环依赖）：

import { NgModule, Injector } from '@angular/core';

// @dynamic
@NgModule({
  declarations: [],
  imports: [],
  providers: [],
  exports: [],
})
export class DataInjectorModule {
  static InjectorInstance: Injector; …

我已将 MetaMask 与 Angular 集成，在从代码中打开 MetaMask 扩展时出现此错误。

以下是我打开扩展的代码。我在单击打开 MetaMask 时调用此函数，它给出了该错误

MetaMask - RPC 错误：权限请求已挂起；请稍等。{code:-32002, message:“权限请求已待处理；请稍候。”}

ethEnabled(template?): any
  {
    if ((window as any).web3)
    {
      (window as any).web3 = new Web3((window as any).web3.currentProvider);
      (window as any).ethereum.enable();
      console.log((window as any).ethereum.enable());

    }
    else
    {
      this.modalRef = this.modalService.show(template);
    }
  }

在我的 Angular 11 项目中，我在构建和服务项目时遇到以下错误。

（节点：15218）UnhandledPromiseRejectionWarning：错误：路径/ Y /node_modules/ @abc/X /lib/language-translations.d.ts 中声明的符号 LanguageTranslationModule 未从@abc/X导出（导入到路径/ Y /src/ lib/.module.ts) ......

错误：./src/main.ts 模块构建失败（来自 ./node_modules/@ngtools/webpack/src/ivy/index.js）：错误：在路径/ Y /node_modules/ @abc/X /lib中声明的符号 LanguageTranslationModule /language-translations.d.ts 未从@abc/X导出（导入到路径/ Y /src/lib/.module.ts）.......

错误：./src/polyfills.ts 模块构建失败（来自 ./node_modules/@ngtools/webpack/src/ivy/index.js）：错误：在路径/ Y /node_modules/ @abc/X /lib中声明的符号 LanguageTranslationModule /language-translations.d.ts 未从@abc/X导出（导入到路径/ Y /src/lib/.module.ts）.......

场景：我想使用一个库（X）作为另一个库（Y）内的依赖项。当我安装Y库中的所有包和依赖包（包括X的）时，它给出了上述错误。

Angular CLI: 11.1.4
Node: 10.16.0
OS: linux x64

Angular: 11.1.0

{
  "name": "@abc/X",
  "version": "0.0.2",
  "peerDependencies": {
    "@angular/common": "^11.1.2",
    "@angular/core": …