Question

你可以告诉我，我做错了什么吗？我认为这是一个简单的错误，但我是棱角分明的新手，我无法找到它。

EXCEPTION：没有String的提供者！（SwNavItemCmp - ＆gt; String）

＆＃13;

export interface SwNavItemModel {
	name: string;
  route: string;
  children?: Array<SwNavItemModel>;
}

＆＃13;

import {SwNavItemModel} from '../models/sw_nav_item_model';

export const NAV_ITEMS_DATA: Array<SwNavItemModel> = [
  { name: 'Home',
  	route: '/Home' },
  { name: 'Offer',
    route: '/Offer',
  	children: [
      { name: 'Prices',
      	route: '/Prices' },
      { name: 'Samples',
        route: '/Samples' }
    ]
  },
  { name: 'About',
    route: '/About',
    children: [
      { name: 'Us',
        route: '/Us' },
      { name: 'Projects',
        route: '/Projects' },
      { name: 'Skills',
        route: '/Skills' }
    ]
  },
  { name: 'Contact',
    route: '/Contact' }
];

＆＃13;

import {Injectable} from 'angular2/core';
import {NAV_ITEMS_DATA} from '../data/mock_nav_data';


@Injectable()
export class NavService {
	getNavData() {
		return Promise.resolve(NAV_ITEMS_DATA);
	}
}

＆＃13;

import {Component, OnInit} from 'angular2/core';
import {
ROUTER_DIRECTIVES
} from 'angular2/router';
import {SwNavItemCmp} from './sw-nav-item/sw_nav_item';
import {SwNavItemModel} from '../../../models/sw_nav_item_model';
import {NavService} from '../../../services/nav_service';

@Component({
  selector: 'sw-nav',
  templateUrl: './components/shared/sw-nav/sw_nav.html',
  styleUrls: ['./components/shared/sw-nav/sw_nav.css'],
  providers: [NavService],
  directives: [ROUTER_DIRECTIVES, SwNavItemCmp]
})
export class SwNavCmp implements OnInit {
  public items: Array<SwNavItemCmp> = [];

  constructor(private _navService: NavService) {
  }

  ngOnInit(): any {
    this.getNavData();
  }

  getNavData() {
      this._navService.getNavData().then((navData: Array<SwNavItemModel>) => {
          console.log(navData);
          console.log(Object.keys(navData));
          this.addItems(navData);
      });
  }

  addItem(name: string, route: string, children?: Array<SwNavItemModel>) {
    console.log();
    console.log('name: ' + name);
    console.log('route: ' + route);
    console.log('children: ' + children);
    if(children) {
      let childrenItems: Array<SwNavItemCmp> = [];
      console.log('childrenItems: ' + childrenItems);
      children.forEach((child) => {
        console.log('child: ' + child);
        childrenItems.push(new SwNavItemCmp(child.name, child.route, null));
        console.log('childrenItems: ' + childrenItems);
      });
      this.items.push(new SwNavItemCmp(name, route, childrenItems));
      console.log('Items: ' + this.items);
    } else {
      this.items.push(new SwNavItemCmp(name, route, null));
      console.log('Items: ' + this.items);
    }
  }

  addItems(itemsArray: Array<SwNavItemModel>) {
    console.log('ItemsArray: ' + itemsArray);
    itemsArray.forEach((item) => {
      console.log('item: ' + item);
      item.children ? this.addItem(item.name, item.route, item.children) : this.addItem(item.name, item.route, null);
    });
    console.log('Items: ' + this.items);
  }
}

＆＃13;

import {Component, Input} from 'angular2/core';
import {ROUTER_DIRECTIVES} from 'angular2/router';


@Component({
  selector: 'sw-nav-item',
  templateUrl: './components/shared/sw-nav/sw-nav-item/sw_nav_item.html',
  styleUrls: ['./components/shared/sw-nav/sw-nav-item/sw_nav_item.css'],
  directives: [ROUTER_DIRECTIVES]
})
export class SwNavItemCmp {
	@Input() items: Array<SwNavItemCmp>;
  name: string;
  route: string;
  children: Array<SwNavItemCmp> = [];
  constructor(name: string, route: string, children?: Array<SwNavItemCmp>) {
    this.name = name;
    this.route = route;
    this.children = children;
  }
}

＆＃13;

constructor(name: string, route: string, children?: Array) {...

throw error TS2314: Generic type 'Array<T>' requires 1 type argument(s).

/////////////////////////////////////////////// ///////////////

现在我有了这个：

sw_nav.ts

...
export class SwNavCmp implements OnInit {
  public items: Array<SwNavItemCmp> = [];
  ...
}

sw_nav.html

    <nav>
    <ul class="main-menu">
        <li *ngFor="#item of items">
            <sw-nav-item [items]="item.children"></sw-nav-item>
        </li>
    </ul>
</nav>

问题： - 我应该通过item.children的整个项目吗？

sw_nav_item.ts

import {Component, Input, Inject, Injectable} from 'angular2/core';
import {ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
  selector: 'sw-nav-item',
  templateUrl: './components/shared/sw-nav/sw-nav-item/sw_nav_item.html',
  styleUrls: ['./components/shared/sw-nav/sw-nav-item/sw_nav_item.css'],
  directives: [ROUTER_DIRECTIVES]
})
@Injectable()
export class SwNavItemCmp {
  @Input() items: Array<SwNavItemCmp>;

  name: string;
  route: string;
  children: Array<SwNavItemCmp>;

  constructor(name, route, @Inject(SwNavItemCmp) children: Array<SwNavItemCmp>) {
    this.name = name;
    this.route = route;
    this.children = children;
  }
}

问题： - 构造函数应该如何？我认为它无效。 - 如何将数据从输入传递给构造函数？ - 我应该用Injector.resolveAndCreateChild()来帮助儿童用品吗？

SW-NAV-item.html

???

问题： - 如何渲染它递归？我想渲染所有sw-nav-item本身。

主要问题： - 我应该把var injector = Injector.resolveAndCreate（... 提供（...），它应该怎么样？ - 如果我有错误的结构或概念。怎么做正确的方法？我的意思是递归组件创建和rendreing。

Answer 1

<强>更新

- 构造函数应该如何？我认为这是无效的。

构造函数应列出您希望通过Angulars依赖注入（DI）传入的参数。 DI可以传递在bootstrap（Injector.resolveAndCreateChild()）

中注册的提供者的值

- 如何将数据从输入传递给构造函数？ - 我应该使用Injector.resolveAndCreateChild（）来辅助儿童用品吗？

我不知道这里的“输入”或“儿童用品”是什么意思。您不需要 <some-element [someInput]="someValueFromParent"> @Component({ selector: 'child-component', }) export class ChildComponent { @Input() someInput; constructor() { // here Angular hasn't yet assigned the `someValueFromParent` } ngOnInit() [ // here or in event handlers I can access `someInput` and // `someValueFromParent` is assigned } }

- 如何渲染它递归？我想渲染所有sw-nav-item本身。

我不明白这个问题。这与构造函数有什么关系？

- 我应该把var injector = Injector.resolveAndCreate（...提供（...），

如上所述，您不需要。

它应该怎么样？ - 如果我有错误的结构或概念。怎么做正确的方法？我的意思是递归组件创建和rendreing。

您不需要构造函数。如果要将数据从父级传递给子级，请使用绑定

name

<强>原始

route和constructor(name: string, route: string, children?: Array<SwNavItemCmp>) {参数没有提供者。

{{1}}

如果没有告诉DI要传递什么，就不能在组件构造函数中使用参数。

这些参数的目的是什么？

没有String的提供者

1 个答案: