小编ger*_*via的帖子

我尝试为我的角度材质主题添加更多颜色，我通过 map.deep-merge 函数在 style.scss 中添加了成功颜色

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as material;
@use "sass:map";

@include material.core();

$custom-primary: material.define-palette(material.$light-blue-palette);
$custom-accent: material.define-palette(material.$blue-palette, A200, A100, A400);
$custom-warn: material.define-palette(material.$red-palette);
// extra Colors
$custom-success: material.define-palette(material.$green-palette);
$custom-danger: material.define-palette(material.$orange-palette);



$custom-theme: material.define-light-theme((
  color: (
    primary: $custom-primary,
    accent: $custom-accent,
    warn: $custom-warn,
  )
));


$custom-theme: map.deep-merge(
  $custom-theme,(
    success: $custom-success,
    danger: $custom-danger,
    color:(
      success: $custom-success,
      danger: $custom-danger
    )
  )
    );

@include material.all-component-themes($custom-theme);

一切都正确编译，但是当我尝试将颜色应用于按钮时它看起来像这样

并且不知道为什么。

<button mat-raised-button color="success">Success</button>
<button mat-raised-button color="danger">Danger</button>

目前我正在使用 "@angular/material": "^13.2.4",

我正在学习有关角度测试的课程，并且尝试为具有服务的组件设置测试，并且该服务具有 httpClias 作为依赖项，但当我尝试运行它时出现此错误

NullInjectorError: R3InjectorError(DynamicTestModule)[MedicoService -> HttpClient -> HttpClient]:\n          NullInjectorError: No provider for HttpClient!\n        error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'MedicoService', 'HttpClient', 'HttpClient' ] })\n        NullInjectorError: R3InjectorError(DynamicTestModule)[MedicoService -> HttpClient -> HttpClient]:\n          NullInjectorError: No provider for HttpClient!\n            at NullInjector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10756:1)\n            at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10923:1)\n            at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10923:1)\n            at injectInjectorOnly (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2290:1)\n            at \xc9\xb5\xc9\xb5inject (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2294:1)\n            at Object.MedicoService_Factory [as factory] (ng:///MedicoService/\xc9\xb5fac.js:5:41)\n            at R3Injector.hydrate (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11091:1)\n            at R3Injector.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10912:1)\n            at NgModuleRef$1.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:24988:1)\n            at TestBedRender3.inject (node_modules/@angular/core/__ivy_ngcc__/fesm2015/testing.js:1943:1)\n        Error: Expected undefined to be truthy.\n            at <Jasmine>\n            at UserContext.<anonymous> …

我正在尝试使用 ngbootstra 订阅模式的关闭事件，但我不明白它是如何工作的。我有 2 个组件，第一个组件用于启动模式，第二个组件位于第二个组件内。

第一个

html

<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

TS

import { OtherComponent } from './../other/other.component';
import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap/modal/modal.module';

@Component({
  selector: 'app-joker',
  templateUrl: './joker.component.html',
  styleUrls: ['./joker.component.scss']
})
export class JokerComponent {
  constructor(private modalService: NgbModal, private activeModal: NgbActiveModal) { }

  open(): void{ 
    const modalRef = this.modalService.open(OtherComponent, {centered: true});
    modalRef.componentInstance.name = 'Gerardo';
  }
}

第二次

html

<div class="modal-header">
  <h4 class="modal-title">Hi there!</h4> …

我想弄清楚这 2 是做什么的，我有点困惑，它们是像 div 还是类似的东西？

我阅读了文档，但不清楚是的，而且我想知道我什么时候应该使用它们？还是为了什么？。

顺便说一句，我可以将 css 应用于他们两个吗？