From 22df327dd0a128f9b887611430063a1e6751144d Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Fri, 10 Apr 2020 02:43:32 +0300 Subject: [PATCH] docs: add how context strategies work --- docs/en/UI/Angular/Context-Strategy.md | 117 +++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 docs/en/UI/Angular/Context-Strategy.md diff --git a/docs/en/UI/Angular/Context-Strategy.md b/docs/en/UI/Angular/Context-Strategy.md new file mode 100644 index 0000000000..a474c50ad6 --- /dev/null +++ b/docs/en/UI/Angular/Context-Strategy.md @@ -0,0 +1,117 @@ +# ContextStrategy + +`ContextStrategy` is an abstract class exposed by @abp/ng.core package. There are three context strategies extending it: `ComponentContextStrategy`, `TemplateContextStrategy`, and `NoContextStrategy`. Implementing the same methods and properties, all of these strategies help you define how projected content will get their context. + + + +## ComponentContextStrategy + +`ComponentContextStrategy` is a class that extends `ContextStrategy`. It lets you **pass context to a projected component**. + + +### constructor + +```js +constructor(public context: Partial>) {} +``` + +- `T` refers to component type here, i.e. `Type`. +- `InferredInstanceOf` is a utility type exposed by @abp/ng.core package. It infers component shape. +- `context` will be mapped to properties of the projected component. + + +### setContext + +```js +setContext(componentRef: ComponentRef>): Partial> +``` + +This method maps each prop of the context to the component property with the same name and calls change detection. It returns the context after mapping. + + + +## TemplateContextStrategy + +`TemplateContextStrategy` is a class that extends `ContextStrategy`. It lets you **pass context to a projected template**. + + +### constructor + +```js +constructor(public context: Partial>) {} +``` + +- `T` refers to template context type here, i.e. `TemplateRef`. +- `InferredContextOf` is a utility type exposed by @abp/ng.core package. It infers context shape. +- `context` will be mapped to properties of the projected template. + + +### setContext + +```js +setContext(): Partial> +``` + +This method does nothing and only returns the context, because template context is not mapped but passed in as parameter to `createEmbeddedView` method. + + + +## NoContextStrategy + +`NoContextStrategy` is a class that extends `ContextStrategy`. It lets you **skip passing any context to projected content**. + + +### constructor + +```js +constructor() +``` + +Unlike other context strategies, `NoContextStrategy` contructor takes no parameters. + + +### setContext + +```js +setContext(): undefined +``` + +Since there is no context, this method gets no parameters and will return `undefined`. + + + +## Predefined Context Strategies + +Predefined context strategies are accessible via `CONTEXT_STRATEGY` constant. + + +### None + +```js +CONTEXT_STRATEGY.None() +``` + +This strategy will not pass any context to the projected content. + + +### Component + +```js +CONTEXT_STRATEGY.Component(context: Partial>) +``` + +This strategy will help you pass the given context to the projected component. + + +### Template + +```js +CONTEXT_STRATEGY.Template(context: Partial>) +``` + +This strategy will help you pass the given context to the projected template. + + +## See Also + +- [ProjectionStrategy](./Projection-Strategy.md)