0
我该如何在AngularDart中的用户配置文件图像上实现angular_components的Popup。AngularDart 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>
如果我使用下面的代码。
错误：DirectiveProcessor上dart_chat_ng2_fb3 | LIB /视图/ app_header/app_header.dart]： 错误：模板解析错误：第25行，第7列AppHeader的：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>
，如果我仅仅是“材料按钮”标签切换到“按钮”弹出没有露面
什么问题？什么是实际行为？预期的行为是什么？ –
如果html标签在其他任何材质按钮中发生更改，弹出不起作用 –
您试过了什么html标签？ “不工作”是什么意思？你是否收到错误信息，或刚刚出现的弹出窗口？ –