ayuha406645

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [
      "jquery",
      "owl.carousel"
    ]
  },
  "include": [

ayuha406645

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "owlcarousel2": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"

ayuha406645

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <div class="owl-carousel owl-theme" appOwlcarousel [owlOptions]="owlCarouselOptions">
    <div class="item" style="background: green;">
      <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
    </div>
    <div class="item" style="background: orange;">

ayuha406645

import { Component, NgZone } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  owlCarouselOptions: Object; // 宣告 Owl Carousel 的 Options

ayuha406645

import { Directive, ElementRef, Input } from '@angular/core';
declare var $: any;  // 這裡是個雷，底下會有註解說明。

@Directive({
  selector: '[appOwlcarousel]'
})
export class OwlcarouselDirective {
  $el: JQuery;
  @Input() owlOptions: Object; // 可以透過 component 個別設定 owl carousel 的 options，達到不同頁面的客製化輪播。