Angular2 - TemplateRef 没有提供者(ng2-bootstrap) [英] Angular2 - No provider for TemplateRef (ng2-bootstrap)

查看：26
本文介绍了Angular2 - TemplateRef 没有提供者(ng2-bootstrap)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经针对这个错误尝试了多种解决方案，但没有找到任何成功的方法来克服这个问题:没有 TemplateRef 的提供者！

错误日志:

<块引用>

例外:未捕获(承诺):错误:./FooterComponent 中的错误类 FooterComponent - 内联模板:15:20 导致:无提供者对于模板引用！错误:./FooterComponent 类中的错误FooterComponent - 内联模板:15:20 导致:没有提供者模板引用！

未处理的承诺拒绝:./FooterComponent 类中的错误FooterComponent - 内联模板:15:20 导致:没有提供者模板参考！;区域:角度；任务:Promise.then；价值:

footer.component.ts

import { Component, OnInit } from '@angular/core';@成分({选择器:'sa-footer'，templateUrl: './footer.component.html'})导出类 FooterComponent 实现 OnInit {构造函数(){}ngOnInit() {}}

footer.component.html

<div class="row"><div class="col-xs-12 col-sm-6"><span class="txt-color-white">myAPP © 2016</span>
<div class="col-xs-6 col-sm-6 text-right hidden-xs"><div class="txt-color-white inline-block"><i class="txt-color-blueLight hidden-mobile">上次账户活动 <i class="fa fa-clock-o"></i><strong>52 分钟前 &nbsp;</strong></i><div class="btn-group dropup" dropdown><button class="btn btn-xs dropdown-toggle bg-color-blue txt-color-white" dropdownToggle><i class="fa fa-link"></i><span class="caret"></span><ul class="dropdown-menu pull-right text-left" dropdownMenu><li><div class="padding-5"><p class="txt-color-darken font-sm no-margin">下载进度</p><div class="progress progress-micro no-margin"><div class="progress-bar progress-bar-success" style="width: 50%;"></div>

<li class="divider"></li><li><div class="padding-5"><p class="txt-color-darken font-sm no-margin">服务器负载</p><div class="progress progress-micro no-margin"><div class="progress-bar progress-bar-success" style="width: 20%;"></div>

<li class="divider"></li><li><div class="padding-5"><p class="txt-color-darken font-sm no-margin">内存负载 <span class="text-danger">*critical*</span></p><div class="progress progress-micro no-margin"><div class="progress-bar progress-bar-danger" style="width: 70%;"></div>

<li class="divider"></li><li><div class="padding-5"><button class="btn btn-block btn-default">刷新</button>

我尝试执行以下操作:

  1. 研究:但只找到了实际包含一些指令的模板的答案/解决方案，例如 ngIf、ngSwitch 等(例如忘记 *)

  2. 将 TemplateRef 添加到 providers.这就是我得到的:

<块引用>

'{选择器:字符串；模板网址:字符串；供应商:typeof TemplateRef[];}' 不能分配给类型的参数'成分'.财产提供者"的类型是不兼容的.类型typeof TemplateRef[]"不可分配给类型Provider[]".类型 'typeof TemplateRef' 不能分配给类型 'Provider'.类型typeof TemplateRef"不可分配给类型FactoryProvider".类型typeof TemplateRef"中缺少属性provide".

我将尝试看看如何以某种方式将 TemplateRef 添加到应用程序的模块 providers.但我不知道这是否是解决方案.我希望有人在我继续研究的同时提出解决方案.

谢谢！:D

解决方案

研究:但只找到了实际包含一些指令(例如 ngIf、ngSwitch 等)的模板的答案/解决方案(例如忘记 *)

此处缺少 * :

应该是

来自 ng2-bootstrap:

<块引用>

<button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">按钮下拉<span class="caret"></span><ul *dropdownMenu class="dropdown-menu" role="menu"><li role="menuitem"><a class="dropdown-item" href="#">Action</a></li><li role="menuitem"><a class="dropdown-item" href="#">另一个动作</a></li><li role="menuitem"><a class="dropdown-item" href="#">这里还有别的东西</a></li><li class="divider dropdown-divider"></li><li role="menuitem"><a class="dropdown-item" href="#">分隔链接</a>

I have been trying several solutios for this error, but didn't find any succesful way to overcome this: No provider for TemplateRef!

Error log:

EXCEPTION: Uncaught (in promise): Error: Error in ./FooterComponent class FooterComponent - inline template:15:20 caused by: No provider for TemplateRef! Error: Error in ./FooterComponent class FooterComponent - inline template:15:20 caused by: No provider for TemplateRef!

Unhandled Promise rejection: Error in ./FooterComponent class FooterComponent - inline template:15:20 caused by: No provider for TemplateRef! ; Zone: angular ; Task: Promise.then ; Value:

footer.component.ts

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

@Component({
  selector: 'sa-footer',
  templateUrl: './footer.component.html'
})
export class FooterComponent implements OnInit {

  constructor() {}

  ngOnInit() {}

}

footer.component.html

<div class="page-footer">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <span class="txt-color-white">myAPP © 2016</span>
        </div>

        <div class="col-xs-6 col-sm-6 text-right hidden-xs">
            <div class="txt-color-white inline-block">
                <i class="txt-color-blueLight hidden-mobile">Last account activity <i class="fa fa-clock-o"></i>
                    <strong>52 mins ago &nbsp;</strong> </i>

                <div class="btn-group dropup" dropdown>
                    <button class="btn btn-xs dropdown-toggle bg-color-blue txt-color-white" dropdownToggle>
                        <i class="fa fa-link"></i> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu pull-right text-left" dropdownMenu>
                        <li>
                            <div class="padding-5">
                                <p class="txt-color-darken font-sm no-margin">Download Progress</p>

                                <div class="progress progress-micro no-margin">
                                    <div class="progress-bar progress-bar-success" style="width: 50%;"></div>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <div class="padding-5">
                                <p class="txt-color-darken font-sm no-margin">Server Load</p>

                                <div class="progress progress-micro no-margin">
                                    <div class="progress-bar progress-bar-success" style="width: 20%;"></div>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <div class="padding-5">
                                <p class="txt-color-darken font-sm no-margin">Memory Load <span class="text-danger">*critical*</span>
                                </p>

                                <div class="progress progress-micro no-margin">
                                    <div class="progress-bar progress-bar-danger" style="width: 70%;"></div>
                                </div>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <div class="padding-5">
                                <button class="btn btn-block btn-default">refresh</button>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

I tried to do the following:

  1. Research: But only found answers / solutions for templates that actually contain some directives like ngIf, ngSwitch, etc. (Forgetting the *, for example)

  2. Add TemplateRef to providers. This is what I get:

Argument of type '{ selector: string; templateUrl: string; providers: typeof TemplateRef[]; }' is not assignable to parameter of type 'Component'. Types of property 'providers' are incompatible. Type 'typeof TemplateRef[]' is not assignable to type 'Provider[]'. Type 'typeof TemplateRef' is not assignable to type 'Provider'. Type 'typeof TemplateRef' is not assignable to type 'FactoryProvider'. Property 'provide' is missing in type 'typeof TemplateRef'.

I will try to see how to add somehow TemplateRef to the app's module providers. But I don't know if this is the solution. I hope someone comes out with a solution while I continue researching.

Thank you! :D

解决方案

Research: But only found answers / solutions for templates that actually contain some directives like ngIf, ngSwitch, etc. (Forgetting the *, for example)

missing * here :

<ul class="dropdown-menu pull-right text-left" dropdownMenu>

should be 

<ul class="dropdown-menu pull-right text-left" *dropdownMenu>

From ng2-bootstrap:

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

这篇关于Angular2 - TemplateRef 没有提供者(ng2-bootstrap)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆