Angular2 - 没有 TemplateRef 的提供者(ng2-bootstrap)

Question

我一直在为这个错误尝试几种解决方案，但没有找到任何成功的方法来克服这个问题:没有 TemplateRef 的提供者!

错误日志:

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>

我尝试执行以下操作:

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

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

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'.

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

谢谢! :D

Answer 1

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

此处缺少 *:

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

应该是

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

来自 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>