Angular 代码中html元素的Access指令

有没有办法通过代码从HtmleElement检索自定义@指令

e、 g.假设我已声明以下指令

@指令（{选择器：'[appCustomDirective]}）
导出类MyCustomDirective{
公共MyVariable:string；
}

连接到按钮的：

My按钮

如果我将按钮作为HTMLElement变量，是否有方法：

• 检查是否附加了appCustomDirective
• 检索指令的实例

---

您应该能够通过返回的元件上的注射器访问指令

组成部分：

@Component({
  selector: 'app-my-custom-component',
  template: `
    <button id="with-directive" appMyCustomDirective>Click Me</button>
    <button id="without-directive">Click Me Too</button>
  `
})
export class MyCustomComponent {
}

测试：

describe('MyCustomComponent', () => {
 let component: MyCustomComponent;
 let fixture: ComponentFixture<MyCustomComponent>;

 beforeEach(async(() => {
   TestBed.configureTestingModule({
     declarations: [
       MyCustomComponent,
       MyCustomDirective
     ]
   })
     .compileComponents();
 }));

 beforeEach(() => {
   fixture = TestBed.createComponent(MyCustomComponent);
   component = fixture.componentInstance;
   fixture.detectChanges();
 });

 it('displays a button with the directive', () => {
   const buttonWithDirective = fixture.debugElement.query(By.css('#with-directive'));
   const directiveInstance: MyCustomDirective = buttonWithDirective.injector.get(MyCustomDirective);
   expect(directiveInstance.myVariable).toBe('hello there!');

   const buttonWithoutDirective = fixture.debugElement.query(By.css('#without-directive'));
   //danger!! this will throw an exception because there is no directive
   //const directiveInstance: MyCustomDirective = buttonWithDirective.injector.get(MyCustomDirective);
 });
});

description（'MyCustomComponent'，（）=>{
let组件：MyCustomComponent；
let夹具：组件夹具；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
声明：[
MyCustomComponent，
MyCustomDirective
]
})
.compileComponents（）；
}));
在每个之前（（）=>{
fixture=TestBed.createComponent（MyCustomComponent）；
组件=fixture.componentInstance；
fixture.detectChanges（）；
});
它（'显示带有指令的按钮'，（）=>{
const buttonWithDirective=fixture.debugElement.query（By.css（“#with directive”）；
const directiveInstance:MyCustomDirective=buttonWithDirective.injector.get（MyCustomDirective）；
expect（directiveInstance.myVariable）.toBe（'hello here！'）；
const buttonwhithoutdirective=fixture.debugElement.query（By.css（“#不带指令”）；
//危险！！这将引发异常，因为没有指令
//const directiveInstance:MyCustomDirective=buttonWithDirective.injector.get（MyCustomDirective）；
});
});

您的答案很清楚，并且有很好的文档记录。不过，我仍然缺少一种方法来获取HTMLComponent的注入器。（在您的情况下，您正在访问DebugElement的注入程序）。有什么帮助吗？你能详细说明一下你想要实现的目标吗？也许可以提供一个更具体的例子？你在测试什么吗？HtmleElement不是角度接口，因此“HtmleElement”变量不会有“injector”属性来获取依赖项injector提供的内容。

describe('MyCustomComponent', () => {
 let component: MyCustomComponent;
 let fixture: ComponentFixture<MyCustomComponent>;

 beforeEach(async(() => {
   TestBed.configureTestingModule({
     declarations: [
       MyCustomComponent,
       MyCustomDirective
     ]
   })
     .compileComponents();
 }));

 beforeEach(() => {
   fixture = TestBed.createComponent(MyCustomComponent);
   component = fixture.componentInstance;
   fixture.detectChanges();
 });

 it('displays a button with the directive', () => {
   const buttonWithDirective = fixture.debugElement.query(By.css('#with-directive'));
   const directiveInstance: MyCustomDirective = buttonWithDirective.injector.get(MyCustomDirective);
   expect(directiveInstance.myVariable).toBe('hello there!');

   const buttonWithoutDirective = fixture.debugElement.query(By.css('#without-directive'));
   //danger!! this will throw an exception because there is no directive
   //const directiveInstance: MyCustomDirective = buttonWithDirective.injector.get(MyCustomDirective);
 });
});