AngularDart 弹出组件答案

【问题标题】：AngularDart Popup ComponentAngularDart 弹出组件
【发布时间】：2017-12-19 06:58:06
【问题描述】：

我应该如何在 AngularDart 中的用户个人资料图像上实现 angular_components 的弹出。

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|lib/views/app_header/app_header.dart 上的 DirectiveProcessor]：错误：模板解析错误：AppHeader 第 25 行第 7 列：ParseErrorLevel.FA TAL：空元素没有结束标签“img” ^^^^^^ [来自 dart_chat_ng2_fb3|lib/views/app_component/app_co 上的 TemplateCompiler 错误 mponent.ng_meta.json]: 找不到名称的指令/管道条目：AppHeader .请注意，Dart 转换器的支持有限

<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标签？ “不工作”究竟是什么意思？您是否收到错误消息，或者刚刚出现的弹出窗口？
我已经用错误更新了问题，请通过问题。
允许的内容无，它是一个空元素。标签省略必须有开始标签，不能有结束标签。 developer.mozilla.org/en-US/docs/Web/HTML/Element/img

标签： dart angular-dart angular-components dart-html dart-webui

【解决方案1】：

错误来自模板，如果您阅读此部分： Void elements do not have end tags "img" 它会指出问题所在 - 永远不应该有 </img> 标签，因为 <img> 永远不能包含内容。

一些细节：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

【讨论】：