AngularDartポップアップコンポーネント

Question

AngularDartのユーザープロファイルイメージに、angular_componentsのPopupを実装する方法を教えてください。

https://dart-lang.github.io/angular_components_example/#Popups このリンクは、AngularDartコンポーネントとその実装について知るのに役立ちましたが、私はまだそれをユーザープロファイルイメージに実装できません。だから誰も私がそれをどうすればいいか知るのを助けることができます

ありがとうございます。

app_header.dart

@Component(selector: 'app-header', 
templateUrl: 'app_header.html', 
styleUrls: const ['app_header.css'], 
directives: const [ 
    MaterialButtonComponent, 
    MaterialPopupComponent, 
    PopupSourceDirective, 
    DefaultPopupSizeProvider, 
], 
providers: const [ 
    popupBindings, 
    DefaultPopupSizeProvider, 
],) 


class AppHeader { 
final FirebaseService fbService; 
bool headerFooterPopupVisible = false; 

String get tooltipMsg => 'All the best messages appear in tooltips.'; 
String get longString => 'Learn more about web development with AngularDart' 
    'here. You will find tutorials to get you started.'; 

AppHeader(FirebaseService this.fbService); 
} 

@Injectable() 
PopupSizeProvider createPopupSizeProvider() { 
return const PercentagePopupSizeProvider(); 
} 
@Directive(selector: '[defaultPopupSizeProvider]', providers: const [ 
const Provider(PopupSizeProvider, useFactory: createPopupSizeProvider) 
]) 
class DefaultPopupSizeProvider {} 

app_header.html

<header class="navbar-dark bg-primary layout horizontal center justified"> 
<div class="horiz"> 
<div id="chat-bubble" class="icon"></div> 
<a class="navbar-brand">Dart Chat</a> 
</div> 

<div class="horiz"> 
<div id="sign-in" *ngIf="fbService.user == null" class="horiz"> 
    <div id="google-icon" class="icon"></div> 
    <button class="btn btn-outline-secondary btn-sm" 
(click)="fbService.signIn()">Google Sign In</button> 
</div> 

<div id="sign-out" *ngIf="fbService.user != null" class="horiz"> 
    <div id="user-name">{{fbService.user?.displayName}}</div> 
    <img class="icon" [src]="fbService.user?.photoURL"> 

    <button class="btn btn-outline-secondary btn-sm" (click)="fbService.signOut()">Sign Out</button> 

    <material-button class="blue" 
        raised 
        popupSource 
        #headerExampleSource="popupSource" 
        (trigger)="headerFooterPopupVisible = !headerFooterPopupVisible"> 
    {{headerFooterPopupVisible ? 'Close' : 'Open'}} Custom Popup 
    </material-button> 
    <material-popup defaultPopupSizeProvider 
        enforceSpaceConstraints 
        [source]="headerExampleSource" 
        [(visible)]="headerFooterPopupVisible"> 
    <div header class="custom-header"> 
     This is a Header demo 
    </div> 
    <div class="custom-body"> 
     Hello, Hello, Hello. This is a tall bit of content that needs a scroll 
     bar because the content is so long. 
    </div> 
    <div footer class="custom-footer"> 
     This is a Footer demo 
    </div> 
    </material-popup> 

</div> 

私は、次のコードを使用していた場合。

エラー：dart_chat_ng2_fb3上DirectiveProcessor | libに/ビュー/ app_header/app_header.dart]： ERROR：テンプレートは、エラーを解析：行25、AppHeaderの列7：ParseErrorLevel.FA TAL：ボイドの要素は終了タグを持っていません」 IMG」 ^^^^^^ [dart_chat_ng2_fb3上TemplateCompilerからのエラー| libに/ビュー/ app_component/app_co mponent.ng_meta.json]：AppHeader ：名前のための指令/パイプエントリが見つかりませんでした 。ダートの変圧器がサポート

<img [src]="fbService.user?.photoURL" class="blue" 
        raised 
        popupSource 
        #headerExampleSource="popupSource" 
        (trigger)="headerFooterPopupVisible = !headerFooterPopupVisible"> 
    {{headerFooterPopupVisible ? 'Close' : 'Open'}} Custom Popup 
    </img> 
    <material-popup defaultPopupSizeProvider 
        enforceSpaceConstraints 
        [source]="headerExampleSource" 
        [(visible)]="headerFooterPopupVisible"> 
    <div header class="custom-header"> 
     This is a Header demo 
    </div> 
    <div class="custom-body"> 
     Hello, Hello, Hello. This is a tall bit of content that needs a scroll 
     bar because the content is so long. 
    </div> 
    <div footer class="custom-footer"> 
     This is a Footer demo 
    </div> 
    </material-popup> 

が限られていると私は単純に「ボタン」に、「材料・ボタン」のタグを変更した場合、ポップアップがエラーがテンプレートからである

Answer 1

を示さなかったことに注意してください、この部分を読んだ場合： Void elements do not have end tags "img"これは問題を指摘してくれるでしょう - <img>に決して内容を含めることができないので、</img>タグは絶対にありません。

一部の詳細：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img