Question

我已将正确的库放在angular 2应用程序的index.html文件中，以便引导日期时间选择器工作。当我点击应用程序中的日历徽标时，日历应该打开。我放置了运行此应用程序manage-tweets.component.ts所需的javascript。该组件及其相关的html负责管理推文功能。为了查看我在应用程序中引用的页面，您必须首先单击登录按钮然后单击我的推文按钮，而不是在选择推文部分中选择几条推文。然后单击Schedule tweets。然后，您将看到几个输入框以更改推文的时间表。如果单击日历，则会出现一个弹出窗口。这不会出现。我可以通过以下链接https://plnkr.co/edit/baaYKynvDdszxhCqxSmA?p=preview使用javascript和html在plunker中使用此功能。但是，当我尝试将相同的库包含到Angular 2中时，我的应用程序不起作用。这是我的代码的github链接，以便您可以下载它然后安装它的依赖项 - https://github.com/Renniesb/http。

重要代码

以下是我的index.html的样子：

<!doctype html>
<html>
<head>
  <title>Rossella, Tweet Your Topic</title>
    <meta name="description" content="Tweet Your Topic, Schedule Tweets, Scheduled Tweets, Curated Tweets, TwitterBot, Bots" />
    <meta name="keywords" content="tweet, twitter, schedule tweets, tweet schedule, twitterbot, bots, social media, curated tweets, rss tweets" />

  <!-- SEO Meta Tags

  <meta name="yandex-verification" content="9850fcbd06df9aa2" />
  <meta name="msvalidate.01" content="BEEA0FC0644005ECC02F76737A5DFD2F" />
  <meta name="google-site-verification" content="lQ_V72Aj_H3bz2IOrBtC01p0Mg49BEBifGvQ2YyXpfs" />
   ================================================== -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/css/bootstrap-datetimepicker.min.css">

<!-- load jquery dependency -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- load moment.js dependency -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js">
</script>
<!-- load bootstrap javascript dependency -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<!-- load datetimepicker.js dependency -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.43/js/bootstrap-datetimepicker.min.js">
</script>
 <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
  <meta charset="utf-8">
  <title>Rossella2Ui</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>
</body>
</html>

以下是我管理的推文组件的内容：

import { Component, OnInit } from '@angular/core';
import { Schedule, ArticleService} from './article.service';
declare var $:any;

@Component({
  templateUrl: './manage-tweets.component.html',
  styleUrls: ['./manage-tweets.component.css'],
  providers:[ArticleService]
})
export class ManageTweetsComponent implements OnInit {
scheduled: Schedule[];
selected: any;
id: number;


ngOnInit(){
    this.getSelected();
    this.pickDate();
}

constructor(private articleservice: ArticleService){

}

getSelected(){
    this.selected = this.articleservice.getArticles();
}

removeSelected(selection){
    this.articleservice.getArticles().splice(selection, 1);
}

pickDate(){
        $('.datetimepicker1').datetimepicker();
        $('[data-toggle="popover"]').popover();
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
}

onChange(selection, time: HTMLInputElement,id) {

    if(time.value.length > 0) {
        this.id = this.articleservice.getId();
        this.articleservice.addScheduled(selection,time.value,this.id);
        console.log(this.articleservice.getTweets());
    this.articleservice.getArticles().splice(selection, 1);
    alert("Tweet Scheduled");
    } else {
        alert('enter a date and time')
}
}
}

以下是我管理的推文组件html的样子：

<ul id="sortable">
  <li *ngFor="let selection of selected">

    <!-- FIRST-TWEET -->
    <div class="row">

  <div class="col-sm-7 ">

    <div class="row">
      <div class="col-xs-1">
        <aside class="clickable"><a class="glyphicon glyphicon-resize-vertical"></a>          </aside>

      </div>
      <div class="col-xs-10">
          <div class="outline">
          {{selection}}
          </div>
       <span data-toggle="modal" data-target="#editweet"  class="clickable glyphicon-ring"><a class="glyphicon glyphicon-pencil"></a></span>
       <span><a title="HELP" data-placement="bottom" data-toggle="popover" data-trigger="hover" data-content="This is one of your selected tweets" class="glyphicon glyphicon-question-sign"></a></span>
       <span><a class="glyphicon glyphicon-remove-circle"></a></span>
      </div>
    </div>
  </div>
<!-- END OF FIRST TWEET -->

<!-- FIRST SCHEDULER -->
  <div class="col-xs-11 col-xs-offset-1 col-sm-5 col-sm-offset-0">

          <div class="form-group">
            <div class='input-group date datetimepicker1'>
                <input #time (change)="onChange(selection, time)" placeholder="Click calendar to schedule" type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
  </div>
</div>

<!-- END OF FIRST SCHEDULER -->
</li>
</ul>

Answer 1

应在pickDate挂钩中调用ngAfterViewInit函数。

当你在ngOnInit

中调用它时，DOM中没有html元素

Bootstrap日期时间选择器日历未打开Angular 2

1 个答案: