标签: ng-bootstrap

我正在尝试开发一个标签视图,我可以在运行时动态加载标签.我最近开始使用ng-boostrap中的ngb-tabset,发现它非常有用,除了我似乎无法动态创建标签.

Long2know几乎完全创造了我在这里尝试实现的东西. 目前的挑战是提供此示例的数据.理想情况下,如果可以创建这样的东西

<ngb-tabset  (tabChange)="tabChange($event)" [activeId]="activeId">
    <ngb-tab *ngFor="let comp of components; [id]="start" title="tab1">
        <template ngbTabContent >
            <div> *createTab="comp" </div>
        </template>
    </ngb-tab>
</ngb-tabset>

其中"组件"是不同组件的数组.因此,createTab将是一个指令,它使用FactoryResolver和ViewContainerRef来动态创建组件.

如果我尝试这样的事情,我不会收到错误,但标签视图根本不显示.在查看ngb-tabset的源代码之后,我意识到它使用@ContentChildren来获取选项卡内容,这些内容不适用于使用ViewContainerRef动态创建组件.

我只是想知道是否有其他方法可能类似于实现这一目标？我知道有可能用路由器来实现这一点,但是我已经投入了更多的时间用于这种方法,所以它会更受欢迎,但我对任何事情持开放态度.

我的应用程序文件夹结构如下：

>app
  app.module.ts
  app.routing.ts
>>auth
  login.component
  auth.module.ts
  atuh.routing.module.ts

现在，我想使用ngx-intl-input依赖于的模块ngx-bootstrap。我想包括intl-input在登录组件中。

所以，如果我进口ngx-bootsrap的auth.module...

auth.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { AuthRoutingModule } from './auth-routing.module';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { NgxIntlTelInputModule } from 'ngx-intl-tel-input';
@NgModule({
  imports: [
    CommonModule,
    AuthRoutingModule,
    BsDropdownModule.forRoot(),
    NgxIntlTelInputModule
  ],
  declarations: [LoginComponent]
})
export class AuthModule { }

我收到以下错误：

ERROR Error: Uncaught (in promise): Error: …

我正在尝试为daterangepicker添加功能,以允许根据所选的日期范围过滤项目列表.

我希望结合以下功能:

1. 有一个显示"过滤"的按钮.没有输入.

2. 用户可以单击该按钮,然后打开显示2个月的日历 - 当前和下一个.

3. 然后,用户可以选择日期范围.

4. 然后,所选日期范围将成为按钮的标签,向用户显示他或她选择的内容.

这个功能可以吗？当我尝试在按钮上添加日历时,它会完全中断.当我使用输入弹出日历时,它只允许我选择开始日期,然后关闭.

这就是我想要的:

<button #dp ngModel (click)="d.toggle()" (ngModelChange)="onDateChange($event)" [displayMonths]="2" [dayTemplate]="t" ngbDatepicker #d="ngbDatepicker">
         Click Me
</button>


<ng-template #t let-date="date" let-focused="focused">
    <span class="custom-day"
    [class.focused]="focused"
    [class.range]="isFrom(date) || isTo(date) || isInside(date) || isHovered(date)"
    [class.faded]="isHovered(date) || isInside(date)"
    (mouseenter)="hoveredDate = date"
    (mouseleave)="hoveredDate = null">
    {{ date.day }}
</ng-template>

谢谢

我是角度2+的新手,并继承了一个不完整的项目.我的目标是创建一个工具提示,检查特定字段的审计详细信息,并显示它们.一个例子可能是:

"Updated by Seth, on 8/18/18."

为此,我创建了一个角度组件,通过服务传递所有相关信息.通过查看Web调试器,我可以看到服务调用正在运行.不幸的是,渲染的是带有以下不完整文本的工具提示:

 "updated by , " 

这是我的组件模板.

<ng-template #tipContent>
<span *ngIf="loadCompleted">Updated By {{ auditDetail.updatedBy }}, {{ auditDetail.updatedAt | amTimeAgo }}</span>
</ng-template>
<i [ngbTooltip]="tipContent" (mouseenter)="refreshAuditDetail()" class="fas fa-info-circle fa-sm"></i>

这是组件打字稿.

@Component({
 selector: 'audit-tooltip',
 templateUrl: './audit-tooltip.component.html',
 styleUrls: ['./audit-tooltip.component.css']
})
export class AuditTooltipComponent {
 @Input() plan: Plan;
 @Input() fieldName: string;
 auditDetail: AuditDetail;
 loadCompleted: boolean = false;

constructor(private planService: PlanService) { }

refreshAuditDetail() {
 var planId = this.plan.id;
 var fieldName = this.fieldName;
 var fieldValue = this.plan[this.fieldName];
 this.loadCompleted = false;


this.planService.getAuditDetails(planId, …

Angular 6 ngBootstrap网站

(封端:其他)

在better728x90.gif正确的文件夹存在,不知道为什么我对确实存在的图像刚开此错误和其他404.

以下路径是正确的:

<a href="assets/images/banners/better728x90.gif">
    <img src="assets/images/banners/better728x90.gif" width="728" height="90" class="fit"><br>
</a>

当我在chrome检查器中检出img元素时,我看到了:

img[src="assets/images/banners/better728x90.gif"] {
    display: none !important;
}

当我display:block用以下方法强制所有图像时,最终会显示丢失的图像图标.

:host {
  img {
    display: block !important;
  }
}

assets/images/banners/better728x90.gif:1 GET http://localhost:4200/assets/images/banners/better728x90.gif net::ERR_BLOCKED_BY_CLIENT