blocks|key|4437091|text|如果你不想做new+myPipe()，因为你正在向管道注入依赖，你可以注入像provider这样的组件并在没有new的情况下使用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4437092|示例：|4437093|++++//+In+your+component...

++++import+{+Component,+OnInit+}+from+'@angular/core';
++++import+{+myPipe}+from+'./pipes';

++++@Component({
++++++selector:+'my-component',
++++++template:+'{{+data+}}',
++++++providers:+[+myPipe+]
++++})
++++export+class+MyComponent()+implements+OnInit+{
++++++data+=+'some+data';
++++++constructor(private+myPipe:+myPipe)+{}

++++++ngOnInit()+{
++++++++this.data+=+this.myPipe.transform(this.data);
++++++}
++++}|code-block|syntax|javascript|4437094|entityMap^0|6|C|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>If you don't want to do <code>new myPipe()</code> because you're injecting dependencies to pipe, you can inject in component like provider and use without new.</p>
<p>Example:</p>
<pre class="lang-js prettyprint-override"><code>    // In your component...

    import { Component, OnInit } from '@angular/core';
    import { myPipe} from './pipes';

    @Component({
      selector: 'my-component',
      template: '{{ data }}',
      providers: [ myPipe ]
    })
    export class MyComponent() implements OnInit {
      data = 'some data';
      constructor(private myPipe: myPipe) {}

      ngOnInit() {
        this.data = this.myPipe.transform(this.data);
      }
    }
</code></pre>


blocks|key|4437140|text|其他答案在angular+5中不起作用吗？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4437141|我得到一个错误，因为DatePipe不是一个提供者，所以它不能被注入。一种解决方案是将其作为提供者放在应用程序模块中，但我更喜欢的解决方案是实例化它。|4437142|在需要的地方实例化它：|4437143|我查看了DatePipe的源代码，以了解它是如何获得语言环境的：https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174|offset|length|4437144|我想在一个管道中使用它，所以我的示例在另一个管道中：|4437145|++++import+{+Pipe,+PipeTransform,+Inject,+LOCALE_ID+}+from+'@angular/core';
++++import+{+DatePipe+}+from+'@angular/common';

++++@Pipe({
++++++++name:+'when',
++++})
++++export+class+WhenPipe+implements+PipeTransform+{
++++++++static+today+=+new+Date((new+Date).toDateString().split('+').slice(1).join('+'));
++++++++datePipe:+DatePipe;

++++++++constructor(@Inject(LOCALE_ID)+private+locale:+string)+{
++++++++++++this.datePipe+=+new+DatePipe(locale);
++++++++}
++++++++transform(value:+string+%7C+Date):+string+{
++++++++++++if+(typeof(value)+===+'string')
++++++++++++++++value+=+new+Date(value);

++++++++++++return+this.datePipe.transform(value,+value+<+WhenPipe.today+?+'MMM+d':+'shortTime')
++++++++}
++++}|code-block|syntax|javascript|4437146|这里的关键是从angular的内核导入Inject和LOCALE_ID，然后注入它，这样你就可以把它提供给DatePipe来正确地实例化它。|4437147|使DatePipe成为提供者|4437148|在你的应用程序模块中，你也可以像这样将DatePipe添加到你的提供者数组中：|4437149|++++import+{+DatePipe+}+from+'@angular/common';

++++@NgModule({
++++++++providers:+[
++++++++++++DatePipe
++++++++]
++++})|4437150|现在你可以在需要的地方把它注入到你的构造函数中(就像cexbrayat的答案一样)。|4437151|摘要：|4437152|无论哪种解决方案都有效，我不知道哪一种angular会认为最“正确”，但我选择手动实例化它，因为angular本身并没有提供datepipe作为提供者。|4437153|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174^0|0|0|0|W|2L|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1E|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1F|8|@]|9|@$H|1G|I|1H|1|1I]]|A|$]]|$1|J|3|K|5|6|7|1J|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1K|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1L|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1M|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1N|8|@]|9|@]|A|$]]|$1|W|3|X|5|N|7|1O|8|@]|9|@]|A|$O|P]]|$1|Y|3|Z|5|6|7|1P|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1R|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]]]

<h1>Other answers don't work in angular 5?</h1>
<p>I got an error because DatePipe is not a provider, so it cannot be injected.  One solution is to put it as a provider in your app module but my preferred solution was to instantiate it.</p>
<h2>Instantiate it where needed:</h2>
<p>I looked at DatePipe's source code to see how it got the locale: <a href="https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174" rel="nofollow noreferrer">https://github.com/angular/angular/blob/5.2.5/packages/common/src/pipes/date_pipe.ts#L15-L174</a></p>
<p>I wanted to use it within a pipe, so my example is within another pipe:</p>
<pre class="lang-js prettyprint-override"><code>    import { Pipe, PipeTransform, Inject, LOCALE_ID } from '@angular/core';
    import { DatePipe } from '@angular/common';

    @Pipe({
        name: 'when',
    })
    export class WhenPipe implements PipeTransform {
        static today = new Date((new Date).toDateString().split(' ').slice(1).join(' '));
        datePipe: DatePipe;

        constructor(@Inject(LOCALE_ID) private locale: string) {
            this.datePipe = new DatePipe(locale);
        }
        transform(value: string | Date): string {
            if (typeof(value) === 'string')
                value = new Date(value);

            return this.datePipe.transform(value, value &lt; WhenPipe.today ? 'MMM d': 'shortTime')
        }
    }
</code></pre>
<p>The key here is importing Inject, and LOCALE_ID from angular's core, and then injecting that so you can give it to the DatePipe to instantiate it properly.</p>
<h2>Make DatePipe a provider</h2>
<p>In your app module you could also add DatePipe to your providers array like this:</p>
<pre class="lang-js prettyprint-override"><code>    import { DatePipe } from '@angular/common';

    @NgModule({
        providers: [
            DatePipe
        ]
    })
</code></pre>
<p>Now you can just have it injected in your constructor where needed (like in cexbrayat's answer).</p>
<h2>Summary:</h2>
<p>Either solution worked, I don't know which one angular would consider most &quot;correct&quot; but I chose to instantiate it manually since angular didn't provide datepipe as a provider itself.</p>


blocks|key|4437171|text|从Angular+6开始，您可以从@angular/common实用程序导入formatDate以在组件内部使用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4437172|它是在https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae上被介绍的|4437173|I可以用作：|4437174|import+{formatDate}+from+'@angular/common';
formatDate(new+Date(),+'d+MMM+yy+HH:mm',+'en');|code-block|syntax|javascript|4437175|尽管必须提供区域设置|4437176|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae^0|H|F|12|A|0|3|29|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|H|3|I|5|6|7|17|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|18|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|19|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>As of Angular 6 you can import <code>formatDate</code> from <code>@angular/common</code> utility to use inside the components. </p>

<p>It was intruduced at <a href="https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae" rel="noreferrer">https://github.com/smdunn/angular/commit/3adeb0d96344c15201f7f1a0fae7e533a408e4ae</a></p>

<p>I can be used as: </p>

<pre><code>import {formatDate} from '@angular/common';
formatDate(new Date(), 'd MMM yy HH:mm', 'en');
</code></pre>

<p>Although the locale has to be supplied</p>


blocks|key|4437181|text|如果要在组件中使用自定义管道，可以添加|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4437182|@Injectable({
++providedIn:+'root'
})|code-block|syntax|javascript|4437183|添加到自定义管道的注释。然后，您可以将其用作服务|4437184|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If you want to use your custom pipe in your components, you can add</p>

<pre><code>@Injectable({
  providedIn: 'root'
})
</code></pre>

<p>annotation to your custom pipe. 
Then, you can use it as a service</p>


<p>In AngularJS, I am able to use filters (pipes) inside of services and controllers using syntax similar to this:</p>

<pre><code>$filter('date')(myDate, 'yyyy-MM-dd');
</code></pre>

<p>Is it possible to use pipes in services/components like this in Angular?</p>


Angular - Use pipes in services and components

在AngularJS中，我可以在服务和控制器中使用过滤器(管道)，语法类似如下：$filter('date')(myDate, 'yyyy-MM-dd');在Angular中可以在服务/组件中使用管道吗？

问Angular -在服务和组件中使用管道
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular -在服务和组件中使用管道EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular -在服务和组件中使用管道
EN