Question

我开始学习Dart / AngularDart并且我试图按照https://angulardart.org/中的教程显示一个简单的组件，我的问题是我有一个空白页面没有显示任何内容。这是我的代码：

web / nasiha.dart

import 'dart:html';
import 'package:angular/angular.dart';
import 'components/post/post.dart';
import 'dart:mirrors';

class MyAppModule extends Module {
  MyAppModule() {
    type(PostComponent);
  }
}

void main() {
  ngBootstrap(module: new MyAppModule());
}

web / nasiha.html

<!DOCTYPE html>

<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Nasiha</title>
    <link rel="stylesheet" href="css/nasiha.css">
  </head>
  <body>
     <post></post>
    <script src="packages/shadow_dom/shadow_dom.min.js"></script>
    <script type="application/dart" src="nasiha.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

幅/组件/后/ post.dart

import 'package:angular/angular.dart';

@NgComponent(
    selector: 'post',
    templateUrl:'components/post/post.html',
    cssUrl: 'components/post/post.css',
    publishAs: 'cmp_post'
)
class PostComponent {
  String text= "This is a simple text to show";
  String userName = "test";
  DateTime date= new DateTime.now();

  PostComponent(String text, String userName, DateTime date){
    this.text = text;
    this.userName = userName;
    this.date = date;
  }

  String getText(){
    return this.text;
  }
  void setText(String text){
    this.text = text;
  }
  DateTime getDate(){
    return this.date;
  }
  void setDate(DateTime date){
    this.date = date;
  }
  String getUserName(){
    return this.userName;
  }
  void setUserName(String userName){
    this.userName = userName;
  }
}

幅/组件/后/ post.html

<div>
  <p ng-model="cmp_post.post_text">
  {{cmp_post.text}}
  </p>
  <div ng-model="cmp_post.post_date">
  {{cmp_post.date}}
  </div>
  <div ng-model="cmp_post.post_username">
  {{cmp_post.userName}}
  </div>
</div>

Answer 1

您应该从pubspec.yaml上下文菜单中执行pub upgrade。
web / components / post / post.html中的ng-model属性是多余的。
PostComponent(String text, String userName, DateTime date){
此代码无效您可以在模块中注册可以注入的类构造函数或您使用注释来注入原语类型如String，int，double，...（如果您想了解如何注入原始类型或使用注释注释，请参阅How can I Dependency Inject based on type and name, with AngularDart?

显示一个简单的AngularDart组件

1 个答案: