- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我正在寻找将已知/定义的组件注入(inject)应用程序的根并将 @Input()
选项投影到该组件的最佳方法。
这对于在应用程序主体中创建模态/工具提示之类的东西是必要的,这样 overflow:hidden
/etc 就不会扭曲位置或将其完全切断。
我发现我可以获得 ApplicationRef
,然后巧妙地向上遍历并找到 ViewContainerRef
。
constructor(private applicationRef: ApplicationRef) {
}
getRootViewContainerRef(): ViewContainerRef {
return this.applicationRef['_rootComponents'][0]['_hostElement'].vcRef;
}
一旦我有了它,我就可以像这样在 ref 上调用 createComponent
:
appendNextToLocation(componentClass: Type, location: ViewContainerRef): ComponentRef {
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
const parentInjector = location.parentInjector;
return location.createComponent(componentFactory, location.length, parentInjector);
}
但是现在我已经创建了组件,但是我的 Đầu vào
属性都没有实现。为了实现这一点,我必须手动遍历我的选项并将它们设置为 appendNextToLocation
实例的结果,例如:
const props = Object.getOwnPropertyNames(options);
for(const prop of props) {
component.instance[prop] = options[prop];
}
现在我确实意识到您可以做一些 DI 来注入(inject)选项,但这使得它在尝试用作普通组件时无法重复使用。这是供引用的样子:
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(ComponentClass);
let parentInjector = location.parentInjector;
let providers = ReflectiveInjector.resolve([
{ provide: ComponentOptionsClass, useValue: options }
]);
childInjector = ReflectiveInjector.fromResolvedProviders(providers, parentInjector);
return location.createComponent(componentFactory, location.length, childInjector);
综上所述,以上所有实际上都有效,但有时感觉有点老套。我还担心像上面那样设置输入属性的生命周期时间,因为它发生在创建之后。
câu trả lời hay nhất
在 2.3.0 中,引入了 attachView
,它允许您能够将更改检测附加到 ApplicationRef
,但是,您仍然需要手动将元素附加到根容器。这是因为对于 Angular2,其运行环境的可能性可能是 web workers、universal、nativescript 等,因此我们需要明确地告诉它我们希望将其添加到 View 的位置/方式。
下面是一个示例服务,它允许您动态插入组件并自动投影组件的 Đầu vào
。
nhập khẩu {
ApplicationRef, ComponentFactoryResolver, ComponentRef, Injectable,
Injector, ViewContainerRef, EmbeddedViewRef, Type
} from '@angular/core';
/**
* Injection service is a helper to append components
* dynamically to a known location in the DOM, most
* noteably for dialogs/tooltips appending to body.
*
* @export
* @class InjectionService
*/
@Injectable()
export class InjectionService {
private _container: ComponentRef;
constructor(
private applicationRef: ApplicationRef,
private componentFactoryResolver: ComponentFactoryResolver,
private injector: Injector) {
}
/**
* Gets the root view container to inject the component to.
*
* @returns {ComponentRef}
*
* @memberOf InjectionService
*/
getRootViewContainer(): ComponentRef {
if(this._container) return this._container;
const rootComponents = this.applicationRef['_rootComponents'];
if (rootComponents.length) return rootComponents[0];
throw new Error('View Container not found! ngUpgrade needs to manually set this via setRootViewContainer.');
}
/**
* Overrides the default root view container. This is useful for
* things like ngUpgrade that doesn't have a ApplicationRef root.
*
* @param {any} container
*
* @memberOf InjectionService
*/
setRootViewContainer(container): void {
this._container = container;
}
/**
* Gets the html element for a component ref.
*
* @param {ComponentRef} componentRef
* @returns {HTMLElement}
*
* @memberOf InjectionService
*/
getComponentRootNode(componentRef: ComponentRef): HTMLElement {
return (componentRef.hostView as EmbeddedViewRef).rootNodes[0] as HTMLElement;
}
/**
* Gets the root component container html element.
*
* @returns {HTMLElement}
*
* @memberOf InjectionService
*/
getRootViewContainerNode(): HTMLElement {
return this.getComponentRootNode(this.getRootViewContainer());
}
/**
* Projects the inputs onto the component
*
* @param {ComponentRef} component
* @param {*} options
* @returns {ComponentRef}
*
* @memberOf InjectionService
*/
projectComponentInputs(component: ComponentRef, options: any): ComponentRef {
if(options) {
const props = Object.getOwnPropertyNames(options);
for(const prop of props) {
component.instance[prop] = options[prop];
}
}
return component;
}
/**
* Appends a component to a adjacent location
*
* @template T
* @param {Type} componentClass
* @param {*} [options={}]
* @param {Element} [location=this.getRootViewContainerNode()]
* @returns {ComponentRef}
*
* @memberOf InjectionService
*/
appendComponent(
componentClass: Type,
options: any = {},
location: Element = this.getRootViewContainerNode()): ComponentRef {
let componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
let componentRef = componentFactory.create(this.injector);
let appRef: any = this.applicationRef;
let componentRootNode = this.getComponentRootNode(componentRef);
// project the options passed to the component instance
this.projectComponentInputs(componentRef, options);
appRef.attachView(componentRef.hostView);
componentRef.onDestroy(() => {
appRef.detachView(componentRef.hostView);
});
location.appendChild(componentRootNode);
return componentRef;
}
}
关于根中的Angular2动态组件注入(inject),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39857222/
我已阅读有关依赖注入(inject)的信息。然后来了 构造函数注入(inject), setter/getter 注入(inject) 二传手注入(inject) 接口(interface)注入(in
我正在研究依赖注入(inject)模式。我看过很多例子,其中一个典型的例子是使用 XxxService/XxxRepository 作为例子。但是在我看来,按照UML的概念,类XxxRepositor
我开始使用 Google Guice。 我有一个简单的问题: javax.inject 的 @Inject 注释和 com.google.inject 的 有什么区别@Inject 一个 ? 谢谢。
当使用构造函数注入(inject)工厂方法时,依赖的属性不会得到解析。但是,如果在解析依赖的组件之前解析了工厂方法,则一切都会按预期工作。此外,当仅使用属性注入(inject)或构造函数注入(inje
我有这样的事情: class Root { public Root(IDependency dep) {} } class Dependency:IDependency { p
听完Clean Code Talks ,我开始明白我们应该使用工厂来组合对象。因此,例如,如果 House有一个 Door和 Door有一个 DoorKnob , 在 HouseFactory我们创建
情况:我需要在一些 FooClass 中进行惰性依赖实例化,所以我通过 Injector类作为构造函数参数。 private final Injector m_injector; public Foo
在编写代码时,我们应该能够识别两大类对象: 注入(inject)剂 新品 http://www.loosecouplings.com/2011/01/how-to-write-testable-cod
这个问题是关于 Unity Container 的,但我想它适用于任何依赖容器。 我有两个具有循环依赖关系的类: class FirstClass { [Dependency] pub
如果我有 10 个依赖项我需要注入(inject)并且不想在构造函数中有 10 个参数,我应该使用哪种注入(inject)模式? public class SomeClass { privat
我在使用 Angular2 DI 时遇到了问题。我尝试将一个类注入(inject)另一个类,它引发了以下错误: 留言:"Cannot resolve all parameters for 'Produ
对依赖注入(inject)还很陌生,我想弄清楚这是否是一种反模式。 假设我有 3 个程序集: Foo.Shared - this has all the interfaces Foo.Users -
我正在尝试了解 Angular 14 的变化,尤其是 inject()我可以将模块注入(inject)功能的功能,我不需要为此创建特殊服务..但我想我弄错了。 我正在尝试创建一些静态函数来使用包 ng
希望这个问题不是太愚蠢,我试图掌握更高级的编程原理,因此试图习惯使用 Ninject 进行依赖注入(inject)。 因此,我的模型分为几个不同的 .dll 项目。一个项目定义了模型规范(接口(int
我最近一直在大量使用依赖注入(inject)、测试驱动开发和单元测试,并且开始喜欢上它。 我在类中使用构造函数依赖,这样我就可以为单元测试注入(inject)模拟依赖。 但是,当您实际需要生产环境中的
我有下面的代码来使用 Guice 进行依赖注入(inject)。第一个是使用构造函数注入(inject),而另一个是直接在字段上方添加 @Inject。这两种方式有什么区别吗? Guice官网似乎推荐
这个问题在这里已经有了答案: Angular2 Beta dependency injection (3 个答案) 关闭 7 年前。 我正在使用 angular2 测试版。并在使用 @Inject
有没有可能做这样的事情? (因为我尝试过,但没有成功): @Injectable() class A { constructor(private http: Http){ // <-- Injec
我很恼火必须通过 Constructor 传递管道对象,因为我想为业务实体或要传递的值保留构造函数参数。 所以我想通过 setter ,但只要这些 setter 没有被填充,我的包含依赖项的对象就不应
假设我有这个: SomePage.razor: @inject Something something @page "/somepage" My Page @code { // Using
Tôi là một lập trình viên xuất sắc, rất giỏi!