web-dev-qa-db-ja.com

Angular2-TemplateRefのプロバイダーなし（ng2-bootstrap）

私はこのエラーのためにいくつかの解決策を試してきましたが、これを克服するための成功した方法を見つけることができませんでした：TemplateRef！のプロバイダーはありません

エラーログ：

例外：キャッチされない（約束）：エラー：./FooterComponentクラスFooterComponentのエラー-インラインテンプレート：15：20原因：TemplateRefのプロバイダーがありません！エラー：./FooterComponentクラスFooterComponentのエラー-インラインテンプレート：15：20原因：TemplateRefのプロバイダーがありません！

未処理のPromiseの拒否：./FooterComponentクラスFooterComponentのエラー-インラインテンプレート：15：20原因：TemplateRefのプロバイダーがありません！ ;ゾーン：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. Research：ただし、ngIf、ngSwitchなどのディレクティブを実際に含むテンプレートの回答/ソリューションのみが見つかりました。 （たとえば、*を忘れる）

  2. TemplateRefをprovidersに追加します。これは私が得るものです：

型 '{selector：string;の引数templateUrl：文字列;プロバイダー：typeof TemplateRef []; } 'は、タイプ' Component 'のパラメーターに割り当てることができません。プロパティ「プロバイダー」のタイプには互換性がありません。タイプ「typeof TemplateRef []」は、タイプ「Provider []」に割り当てることができません。タイプ「typeof TemplateRef」は、タイプ「Provider」に割り当てることができません。タイプ「typeof TemplateRef」は、タイプ「FactoryProvider」に割り当てることができません。タイプ 'typeof TemplateRef'にプロパティ 'provide'がありません。

アプリのモジュールTemplateRefに何らかの方法でprovidersを追加する方法を試してみます。しかし、これが解決策かどうかはわかりません。研究を続けている間に誰かが解決策を見つけてくれることを願っています。

ありがとうございました！ ：D

angulartypescriptangular-cling2-bootstrap
12
SrAxi

調査：しかし、ngIf、ngSwitchなどのディレクティブを実際に含むテンプレートの回答/ソリューションのみが見つかりました（*を忘れるなど）

ここに*がありません：

<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>
30
n00dl3